CSS - Div不会留在其他Div的右侧

Question

在这里非常简单的设置,我只是想让两个div并排坐下.图像在左侧,文本在右侧.出于某种原因,如果文本太长,它会推动div.我想让cs-summary div理解它应该包装文本,以便不像它一样跳下来:

http://jsfiddle.net/csaltyj/5Huau/

码:

<div class="container">
    <div class="cs-image">
        <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
    </div>
    <div class="cs-summary">
        <p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p>
    </div>
</div>
<div class="container">
    <div class="cs-image">
        <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
    </div>
    <div class="cs-summary">
        <p>Super short text behaves.</p>
    </div>
</div>

CSS:

.container {
    overflow: hidden;
    border: 2px solid #0f0;
    width: 400px;
    margin-bottom: 1em;
}

.cs-image {
    float: left;
    border: 2px solid red;
}

.cs-summary {
    font-size: 0.8em;
    border: 2px solid blue;
    float: left;
    margin-left: 1em;
}

正如您从下面的第二个容器中看到的那样,短文本工作得很好.我不想硬编码任何像素或em值的文本有多宽,我只是想让它符合并"知道"它的界限.

提前致谢.

Answer 1

如果你div.cs-summary没有套装,width它会占用尽可能多的空间

http://jsfiddle.net/hunter/5Huau/7/

.cs-summary {
    width: 180px;
    ...
}

或者您可以删除包装内部div元素,然后执行以下操作:

http://jsfiddle.net/hunter/5Huau/11/

HTML

<div class="container">
    <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />   
    <p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p>        
</div>
<div class="container">
    <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
    <p>Super short text behaves.</p>
</div>

CSS

.container {
    overflow: hidden;
    border: 2px solid #0f0;
    width: 400px;
    margin-bottom: 1em;
}

.container img {
    float: left;
    border: 2px solid red;
}

.container p {
    font-size: 0.8em;
    border: 2px solid blue;
    margin-left: 1em;
}