CSS浮动和自动宽度问题
我的代码是
<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 }
我动态地将数据插入到“右”div 中,当其宽度超过 600px 时,它会从左 div 下来。但我想要一个水平滚动条来查看内容。一种解决方案可能是从右 div 中删除“float:left”。但它仍然会引起问题。
My code is
<body>
<div class="main>
<div class="left">blah blah </div>
<div class="right">blah blah </div>
<div style="clear:both"></div>
</div>
</body>
CSS part:
.main{min-width:1000px}
.left{width:400px ; height:auto ; float:left }
.right{width:auto ; height:auto ;float:left }
I am dynamically inserting data into 'right' div and when its width exceeds 600px , it comes down the left div. But instead of that I want a horizontal scrollbar to view the content. One solution may be, removing "float:left" from right div. But still it causes problem.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我建议您使用“word-wrap”CSS 属性。请参阅此处。
但如果您仍然想保持原来的方式,您可以为右侧的 div 使用
max-width: 600px;
和overflow: auto;
css 属性。我认为它会起作用。I suggest you to use "word-wrap" css property. See here.
But if you still want to keep your way, you can use
max-width: 600px;
andoverflow: auto;
css properties for your right div. I assume it will work.嗯,出于多种原因,您刚刚呈现的布局没有意义,但这是您的网站,因此您可能有自己的理由。
但考虑到这种情况,您所要做的就是:
即使您使用固定的 div 作为包装器,流畅的布局总是更好。
但你应该更精确,我不清楚你想要实现什么,但这可能会解决你的问题。
请记住,如果您使用流体宽度边距、填充和边框,可能会弄乱您的布局。但那是另一个故事了。
编辑:
看到我第一次不明白要实现的目标,您可能正在寻找:“带有负边距技巧的填充”以使所有内容达到相同的高度:
Hmm it does not make sense the layout you just presented for a number of reasons but it's your site so you probably have your reasons .
But given this context all you have to do is :
A fluid layout is always better , even if you're using a fixed div as a wrapper .
But you should be more precise , i don't clearly get what are you trying to achieve but this will probably solve your problem .
And remember if you use fluid widths margins,padding and borders can mess your layout . But that's another story .
EDIT:
See i didn't understood the first time what were trying to achieve , you probably were looking for : " The padding with the negative margin trick " to get everything to the same height :