Question

我有一个浮动的中央DIV，里面有2个div。我希望左侧DIV设置为固定宽度，右侧div设置为响应。我只是无法使它工作。

我正在寻找一种更好的方法来实现这一结果。我的原始代码如下：

CSS

div#content {max-width: 1140px; min-width: 960px; margin:0 auto; }
div#left {width: 100px;   float: left;}
div#right {background:#F63; min-width: 860px; max-width: 1040px; float:left; }

HTML

<div id="content">
<div id="left">Left Content </div>
<div id="right">Right Content </div>
</div>

Answer 1

看看这个问题，它似乎可以解决您的问题：CSS side by side div with Pixel and Percent widths

他们建议给#right一个边距 - 留下与#left div相同的大小

I made a fiddle with the changes below:

div#content {width: 100%; margin:0 auto; }
div#left {width: 100px;   float: left;}
div#right {background:#F63; margin-left: 100px; }

它看起来像你所希望的那样吗？

Answer 2

我假设您需要响应，因此您不希望显示底部滚动条。

由于您需要响应，因此需要对with进行数学运算才能成为％。

我以max-width:1140px;为基础，最大宽度为88％（固定的100px被移除后，1140剩余部分的％值。

这允许响应性。对于最小宽度，我应用了70％，因此该区域没有推到左侧div下方（由于float:left;）

这是工作小提琴：
http://jsfiddle.net/pur4z/2/

CSS

div#content {max-width: 1140px; margin:0 auto; }
div#left {width: 100px;   float: left;}
div#right {background:#F63; min-width:70%; max-width:88%; float: left;}

HTML

<div id="content">
<div id="left">Left Content </div>
<div id="right">Right Content </div>
</div>

响应式布局，带2个浮动div

2 个答案: