我希望我的div的边框看起来像这样
outer div #info
------------------------------------------------------------
| |-----------------||-----------------||-----------------||
| | || || ||
| | || || ||
| | || || ||
| | 1 inner || 2 inner || 3 inner ||
| | div || div || div ||
| | || || ||
| | #leftpannel || #centerpannel || #rightpannel ||
| | || || ||
| | || || ||
| |-----------------||-----------------||-----------------||
|----------------------------------------------------------|
但是当我把它放在浏览器中它看起来像
------------------------------------------------------------
| |-----------------||-----------------||
| | || ||
| | || ||
| | || ||
| | 2 inner || 3 inner ||
| | div || div ||
| | || ||
| | || ||
| | || ||
| | || ||
| |-----------------||-----------------||
||------------------|--------------------------------------|
| |
| |
| |
| |
| 1 inner |
| div |
| |
| |
| |
| |
|------------------|
这是我的css
#rightpannel
{
width:32%;
float:right;
height:390px;
border: solid;
border-width:1px;
border-color:green;
}
#centerpannel
{
width:32%;
display:inline;
margin-left:auto;
margin-right:auto;
height:390px;
border: solid;
border-width:1px;
border-color:green;
}
#leftpannel
{
width:32%;
float:left;
height:390px;
border: solid;
border-width:1px;
border-color:green;
}
#info
{
width:92%;
height:400px;
border: solid;
border-width:1px;
border-color:red;
margin:0 auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 0px;
}
这是我的HTML
<div id="info">
<div id="rightpannel"></div>
<div id="centerpannel"></div>
<div id="leftpannel"></div>
</div>
我真的不知道为什么会这样,我感谢任何帮助 提前谢谢
答案 0 :(得分:3)
主div的宽度不足以容纳其他3.填充,边距和边框都需要考虑。设置一个小提琴和测试,但最终你需要使用数字来获得所需的结果。
另外值得查看盒子模型以获得更清晰的理解
永远不要使用表格来对齐div。那个业余和丑陋!表用于表格数据。结束。
答案 1 :(得分:2)
试试这个
#rightpannel {
width:32%;
float:right;
height:390px;
border: solid;
border-width:1px;
border-color:green;
margin-left:1%;
}
#centerpannel {
width:32%;
float:right;
height:390px;
border: solid;
border-width:1px;
border-color:green;
margin-left:1%;
}
#leftpannel {
width:32%;
float:right;
height:390px;
border: solid;
border-width:1px;
border-color:green;
}
#info {
width:100%;
height:400px;
border: solid;
border-width:1px;
border-color:red;
margin:0 auto;
padding: 5px 5px 5px 0;
}
您仍然需要更改边距填充。
答案 2 :(得分:1)
你可以稍微简化一下并使用一个类而不是3个ID,但看起来为了让3列布局“牢不可破”并重新调整大小你可能需要使用一点JavaScript ......
<强> Working Example 强>
HTML
<div id="info">
<div class="pannel"></div>
<div class="pannel"></div>
<div class="pannel"></div>
</div>
CSS
.pannel {
display:inline-block;
float:left;
height:390px;
border: solid;
border-width:1px;
border-color:green;
margin: 2px;
}
#info {
width:90%;
height:400px;
border: solid;
border-width:1px;
border-color:red;
margin:0 auto;
padding:5px 2px 0 2px;
}
JS
var pannel = function(){
var x = $('#info').width() / 3 - 6.3;
$('.pannel').width(x);
};
$(document).ready(pannel);
$(window).resize(pannel);