Question

我的代码是

<body>
   <div class="main>
      <div class="left">blah blah </div>
      <div class="right">blah blah </div>
      <div style="clear:both"></div>
   </div>
</body>

CSS部分：

.main{min-width:1000px}
.left{width:400px ; height:auto ; float:left }
.right{width:auto ; height:auto ;float:left }

我正在动态地将数据插入'right'div，当它的宽度超过600px时，它会向左下方div。但不是我想要一个水平滚动条来查看内容。一种解决方案可能是，从右div中删除“float：left”。但它仍然会引起问题。

Answer 1

我建议你使用“自动换行”css属性。见here。但是，如果您仍想保持自己的方式，可以使用max-width: 600px;和overflow: auto; css属性作为正确的div。我认为它会起作用。

Answer 2

嗯，由于多种原因你刚刚提出的布局没有意义，但这是你的网站，所以你可能有你的理由。但鉴于这种情况，你所要做的就是：

流体布局总是更好，即使您使用固定div作为包装器。

.left{
width:40% ; 
float:left ; 
}

.right{ 
width:60% ;
overflow : scroll ;
}

但是你应该更准确，我没有明确得到你想要实现的目标，但这可能会解决你的问题。请记住，如果使用流体宽度边距，填充和边框可能会弄乱您的布局。但这是另一个故事。

编辑：
看到我第一次没有理解想要实现的目标，你可能正在寻找：“带有负边距技巧的填充”以使所有东西达到相同的高度：

 .main{overflow:hidden}
 .left{
    width:40% ; 
    float:left ; 
    padding-bottom : 1000px ; 
    margin-bottom : -1000px;
    }

    .right{ 
    width:60% ;
    float:left ;
    padding-bottom : 1000px ; 
    margin-bottom : -1000px; 
    }

浮点和自动宽度问题CSS

2 个答案: