如何以百分比(%)管理响应式设计?

时间:2014-05-13 10:43:51

标签: html css css3 responsive-design

我正在构建一个响应式页面布局,但我有一个问题:

如何管理宽度,填充,边距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;
}

1 个答案:

答案 0 :(得分:0)

我假设您遇到的问题是,当您设置百分比时,您的盒子不会停留在一行上。

你需要小心

width + left/right margin + left/right padding + left/right border = width of container.

像这样: FIDDLE