Question

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

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

Answer 1

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

你需要小心

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

像这样： FIDDLE

如何以百分比（％）管理响应式设计？

1 个答案: