Css 浮动和自动宽度问题_Css_Css Float_Width

Css 浮动和自动宽度问题

css

Css 浮动和自动宽度问题,css,css-float,width,Css,Css Float,Width,我的代码是 <body> <div class="main> <div class="left">blah blah </div> <div class="right">blah blah </div> <div style="clear:both"></div> </div> </body> 我动态地将数据插入到“right”

我的代码是

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

我动态地将数据插入到“right”div中，当其宽度超过600px时，它会从左div向下移动。但我想要一个水平滚动条来查看内容。一个解决方案可能是，从右分区中删除“float:left”。但它仍然会导致问题。

Hmm您刚才呈现的布局没有意义，原因有很多，但它是您的站点，所以您可能有自己的原因。但在这种情况下，你所要做的就是：

流体布局总是更好，即使您使用固定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; 
    }

我建议您使用“word wrap”css属性。看见

但是如果你仍然想保持你的方式，你可以使用

max-width:600px和溢出：自动右侧div的css属性。我想它会起作用。
我将正文分为两部分。左和右。不在“右”类中设置“浮动：左”。右div的内容开始在左下方，一些内容（相当于左div的高度）保持在正确的位置，其余内容开始在左下方，这是我不想要的。有什么建议吗？看，我第一次没听懂，.main{min width:1000px，overflow:hidden}。left{width:400px；padding bottom:600px；margin bottom:-600px；float:left}。right{width:auto；padding bottom:600px；margin bottom:-600px；；float:left}这将解决您的问题。请记住根据需要调整填充和边距。我假设600像素就足够了。通过在底部添加填充和负边距，您的子div将正确扩展。希望有帮助。如果使用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; 
    }