Question

我想要两个水平div。左div的宽度是200px并且是固定的。右侧div的宽度默认为600px，应该是响应式的。如果用户调整浏览器的大小，则右侧div的宽度可能会减小，右侧div会显示滚动条。

我正在尝试使用float和overflow来完成它。但我无法想出正确的解决方案。我该怎么办？

Answer 1

使用display:table和display:table-cell获得更好的结果。

 <div class="main">
   <div class="left">sdfsf</div>
   <div class="right">sfsdfdsfsfdsfds</div>
 </div>

 .main{display:table; width:100%;}
 .left
 {
    display:table-cell;
    min-width:200px;
    width:200px;    
    border:1px solid red;
 }
.right
{
    display:table-cell;
    width:auto;
    border:1px solid green;
}

DEMO

Answer 2

仅仅因为我不喜欢display:table：

可以使用flexbox来实现您正在寻找的内容。

我们的想法是使用right设置width:100%元素的宽度，使用left设置width: 200px; min-width:200px。

我不确定您对溢出的含义，但我的解决方案将right元素的overflow设置为scroll，并且放置了内容在div为width

的另一个600px内

这里是demo。

Answer 3

您的请求有点奇怪，可以完成但不幸的是不使用纯CSS级别1。为了使元素“float”和具有第二个div溢出而不是body元素，您必须使用{{{}的组合1}}和position。

将其复制到（x）html文件并调整浏览器大小......

overflow

我强烈建议不使用它，即使您的浏览器支持要求非常放松，因为仅使用静态布局实际上是IE6时代的一种盒子式的思维方式。如果它是一个客户端，你真的需要强制覆盖它们。

调整大小时，右侧div的两个水平div会滚动

3 个答案: