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

【问题标题】：How to Manage Responsive Design in percentage(%)?如何以百分比（％）管理响应式设计？
【发布时间】：2016-05-12 20:57:57
【问题描述】：

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

如何管理宽度、填充、边距等。百分比（%）？

例如，我想让我的页面左侧栏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;
}

【问题讨论】：

请提供有关上下文的更多信息，最重要的是：您想要应用 % 的代码，甚至更好地创建一个 jsfiddle.net 来处理您的问题。
是的，这是我创建的代码：- jsfiddle.net/u548B
为什么所有的反对票？这个问题可能不值得很多赞成票，但似乎也不值得很多反对票……也许它在它得到小提琴之前就做过了？

标签： html css responsive-design

【解决方案1】：

我假设您遇到的问题是，当您设置百分比时，您的框不会保持在一条线上。

你要小心

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

像这样：FIDDLE

【讨论】：

你的意思是说我们每次都需要使用近似的填充和边距，有什么办法吗？我遵循以百分比（％）获得确切的填充和边距。
@Mayank 很抱歉，但我不明白您在评论中的意思，请您解释一下。