CSS浮动和自动宽度问题

发布于 2024-12-02 23:01:52 字数 537 浏览 1 评论 0原文

我的代码是

<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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

-残月青衣踏尘吟 2024-12-09 23:01:52

我建议您使用“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; and overflow: auto; css properties for your right div. I assume it will work.

一个人的旅程 2024-12-09 23:01:52

嗯,出于多种原因,您刚刚呈现的布局没有意义,但这是您的网站,因此您可能有自己的理由。
但考虑到这种情况,您所要做的就是:

即使您使用固定的 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; 
    }

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 .

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

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

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 :

 .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; 
    }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文