我正在构建一个响应式页面布局,但我有一个问题:
如何管理宽度,填充,边距ETC.百分比(%)?
例如,我想让我的页面左侧栏700px
和右侧栏300px
,所以我必须以百分比(%)使用哪个属性。
这是我的代码:
HTML:
<div class="main_div">
<div class="left_bar">content goes here</div>
<div class="right_bar">content goes here</div>
</div>
CSS:
.main_div {
width:1000px;
float:left;
}
.left_bar {
width:300px;
float:left;
background-color:green;
padding:15px 0;
}
.right_bar {
width:270px;
float:left;
background-color:red;
padding:15px;
}
答案 0 :(得分:0)
我假设您遇到的问题是,当您设置百分比时,您的盒子不会停留在一行上。
你需要小心
width + left/right margin + left/right padding + left/right border = width of container.
像这样: FIDDLE