为什么两个DIV 之间有缝隙 有代码 帮忙调试一下解决方法
日期：2014-05-17 浏览次数：20587 次
为什么两个DIV 之间有缝隙 有代码 帮忙调试一下
<style type= "text/css ">
#panel {
font-size: 12px;
font-weight: bold;
color: #0099FF;
border: 1px solid #000000;
height: 500px;
width: 500px;
}
#column1 {
height: 150px;
width: 150px;
background-color: #3300FF;
float: left;
}
#column2 {
background-color: #CC6633;
height: 100px;
width: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<div id= "panel ">
<div id= "column1 "> 11111 </div>
<div id= "column2 "> 111111 </div>
</div>
</body>
为什么两个DIV之间有缝隙啊,请帮帮忙
------解决方案--------------------
#column2 {
background-color: #CC6633;
height: 100px;
width: 100px;
overflow: hidden;
float: left;
}
------解决方案--------------------
楼上正解,第二个div也应该设置浮动,要不在别的浏览器可能不是在同一排了~~~
------解决方案--------------------
也来一种
<style type= "text/css ">
#panel {
font-size: 12px;
font-weight: bold;
color: #0099FF;
border: 1px solid #000000;
height: 500px;
width: 500px;
position:relative;
}
#column1 {
height: 150px;
width: 150px;
background-color: #3300FF;
float: left;
}
#column2 {
position:absolute;
background-color: #CC6633;
height: 100px;
width: 100px;
overflow: hidden;
left:150px;
}
</style>
</head>
<body>
<div id= "panel ">
<div id= "column1 "> 11111 </div>
<div id= "column2 "> 111111 </div>
</div>
</body>
------解决方案--------------------
最好是使用 FLOAT：LEFT；
------解决方案--------------------
<style type= "text/css ">
div#panel {
font-size: 12px;
font-weight: bold;
color: #0099FF;
border: 1px solid #000000;
height: 500px;
width: 500px;
}
div#column1 {
height: 150px;
width: 150px;
background-color: #3300FF;
float: left;
}
div#column2 {
background-color: #CC6633;
height: 100px;
width: 100px;
float: left;
}
</style>
</head>
<body>
<div id= "panel ">
<div id= "column1 "> 11111 </div>
<div id= "column2 "> 111111 </div>
</div>
</body>
------解决方案--------------------
在css里面加上margin:0px;padding:0px;看看
------解决方案--------------------
解决了不？
http://bolm.cn
<style type= "text/css ">
#panel {
font-size: 12px;
font-weight: bold;
color: #0099FF;
border: 1px solid #000000;
height: 500px;
width: 500px;
}
#column1 {
height: 150px;
width: 150px;
background-color: #3300FF;
float: left;
}
#column2 {
background-color: #CC6633;
height: 100px;
width: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<div id= "panel ">
<div id= "column1 "> 11111 </div>
<div id= "column2 "> 111111 </div>
</div>
</body>
为什么两个DIV之间有缝隙啊,请帮帮忙
------解决方案--------------------
#column2 {
background-color: #CC6633;
height: 100px;
width: 100px;
overflow: hidden;
float: left;
}
------解决方案--------------------
楼上正解,第二个div也应该设置浮动,要不在别的浏览器可能不是在同一排了~~~
------解决方案--------------------
也来一种
<style type= "text/css ">
#panel {
font-size: 12px;
font-weight: bold;
color: #0099FF;
border: 1px solid #000000;
height: 500px;
width: 500px;
position:relative;
}
#column1 {
height: 150px;
width: 150px;
background-color: #3300FF;
float: left;
}
#column2 {
position:absolute;
background-color: #CC6633;
height: 100px;
width: 100px;
overflow: hidden;
left:150px;
}
</style>
</head>
<body>
<div id= "panel ">
<div id= "column1 "> 11111 </div>
<div id= "column2 "> 111111 </div>
</div>
</body>
------解决方案--------------------
最好是使用 FLOAT：LEFT；
------解决方案--------------------
<style type= "text/css ">
div#panel {
font-size: 12px;
font-weight: bold;
color: #0099FF;
border: 1px solid #000000;
height: 500px;
width: 500px;
}
div#column1 {
height: 150px;
width: 150px;
background-color: #3300FF;
float: left;
}
div#column2 {
background-color: #CC6633;
height: 100px;
width: 100px;
float: left;
}
</style>
</head>
<body>
<div id= "panel ">
<div id= "column1 "> 11111 </div>
<div id= "column2 "> 111111 </div>
</div>
</body>
------解决方案--------------------
在css里面加上margin:0px;padding:0px;看看
------解决方案--------------------
解决了不？
http://bolm.cn
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
