自动宽度与浮动div

Question

我有一个问题，两列都有左浮动。 当我在右栏中添加太多内容时，它会在左栏下面。

我的目标是右列使用所有可用宽度，但如果内容太多，则不会在forst列下。

我尝试用table-cell解决我的问题，但我的左列有一个精确的高度，所以似乎不可能。

http://jsfiddle.net/#run&togetherjs=NGo7m4749M （对不起，我们现在不能用jsfiddle保存）

CSS：

#contener {
    width : 800px;
    background-color : yellow;
    height : 500px;
}

#left {
    float : left;
    width : 100px;
    background-color : blue;
    height : 150px; 
}

#right {
    float :left;
   // If i let width : auto, this column goes under the other... :(
   width : 500px;
}

HTML

<div id="contener">
    <div id="left">Hello</div>
    <div id="right">Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis for.</div>
</div>

由于

Answer 1

你可能只漂浮第一个div，让其他人站在一边，填补所有可用的空间:) http://jsfiddle.net/GCyrillus/p63fj61a/

#right {
    overflow:hidden;/* trigger layout to see floatting elements */
    min-width : 500px;/* min-width should be set on parent, not here actually */
}

Answer 2

正如我在现场小提琴上所展示的那样，您可以在每个部分添加div课程content，如下所示：

<div id="contener">
    <div id="left">
        <div class="content">Hello</div>
    </div>
    <div id="right">
        <div class="content">Eminuit autem inter hu (...) </div>
    </div>
</div>

和css（将float:right和with:700px添加到#right并将边距添加到.content）

#contener {
    width : 800px;
    background-color : yellow;
    height : 500px;
}

#left {
    float : left;
    width : 100px;
    background-color : blue;
}

#right {
    overflow:hidden;
    width:700px;
    float : right;
}

.content{
    margin:10px;   
}

Answer 3

我不确定我是否正确理解了您的问题，但为了让相同大小的列没有相互影响，您应该将以下行添加到CSS属性中：

#right {
    float: left;
    width: 500px;
    white-space: nowrap; // Resizes the right column according to the left column.
    overflow: auto; // Adds a horizontal scroll bar for the content.
}

为了让它看起来更好，您可以从容器中删除background-color : yellow;属性并将其添加到右侧列，结果将如下：

Answer 4

由于您正在浮动div，它们不再处于文档流中，文本将包含内容。

因此，让我们将div设置为宽度百分比。 （我们还会将＆＃34; clearfix＆＃34;应用到我们的容器div中，因此我们不需要设置高度。

#left {
    float : left;
    width : 25%;
    background-color : blue;
}

#right {
  float :left;
  width : 75%;
  background-color:green;
}

这是clearfix

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

让我们将此类设置为容器div

<div id="contener" class="clearfix" >

CodePen