Question

我有一个小问题，两个div并排放置左侧div总是固定宽度，但右侧不是，如果内容太大则会导致换行，这真的很烦人。

这是示例代码：

一切都在这里：

<div id="no1">
  <div class="left">This one is on the left side</div>
  <div class="right">This one is on the right side</div>
</div>

CSS：

.left {float: left;}
.right {float: right;}

但如果<div class="right">的内容过长，则会导致不合适的换行符。

我尝试将<div id="no1">设置为overflow: auto和overflow: scroll，但这并没有做任何事情。
然后我尝试将no1的宽度设置得足够大，所以一切都应该适合，但这也不起作用。
我对下一步该做什么感到有点困惑。

可以在这里找到一个用于演示的JsFiddle http://jsfiddle.net/3b4s7ta7/。

在此先感谢您的帮助！（
的解决方案：
好的，解决方案很简单。正如user2482616和其他人建议的那样，我只需将两个div's的大小设置为50%，如下所示：
.left, .right {width: 50%;}

谢谢你们！

Answer 1

尝试将width: 50%;添加到div中，如下所示：

.left {
    float: left;
    width: 50%;
}
.right {
    float: right;
    width: 50%;
}

JSFiddle

（或者你想要的任何宽度）

Answer 2

试试这个css：

.left,.right{width: 50%;}

作为创建单独的css查询，它将使您的文件变大。因此，请尽量通过放置常见的CSS来最小化它。检查我编辑的Edited Code上的代码。

Answer 3

要添加滚动，您需要执行以下操作：

<strong>This is how it should be:</strong>
<br>
<br>
<div id="no1">
    <div class="left">This content is always left</div>
    <div class="right">This content is always right sided</div>
</div>
<br>
<br><strong>This is baaaad:</strong>
<br>
<br>
<div id="no2">
    <div class="left">Still on the left side</div>
    <div style="height: 50px; overflow-y: scroll;" class="right">But the long content in this div causes a linebreak, an automatic overflow would be nice, scrolling on y-axis is not very pretty, but linebreak isn't either.</div>
</div>

FIDDLE

Answer 4

为左右div提供宽度。另外，给id为＃34; no1＆＃34;允许在溢出时滚动。并尝试使用 clear：both; ，而不是提供这么多 br 。您可以在此fiddle中看到问题。

这是工作代码及其Fiddle

<强> HTML ：

<strong>This is how it should be:</strong><br><br>
<div id="no1">
    <div class="left">This content is always left</div>
    <div class="right">This content is always right sided. This content is always right sided.     This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided. This content is always right sided</div>
</div>

<div class="clearer"></div>  /*replaced br*/

    <strong>This is baaaad:</strong><br><br>
<div id="no2">
    <div class="left">Still on the left side</div>
    <div class="right">But the long content in this div causes a linebreak, an automatic overflow would be nice, scrolling on y-axis is not very pretty, but linebreak isn't either.</div>
</div>

<强> CSS ：

.left
{
    float: left;
    width:50%;
}
.right
{
   float: right;
   width:50%;
} 

.clearer{
    clear:both;
}
#no1{
   overflow-y:scroll;
   height:150px;
}

并排放置div会导致换行，而不是溢出

4 个答案: