Question

这里设置非常简单，我只想让两个div并排坐下。图像在左侧，文本在右侧。出于某种原因，如果文本太长，它会推动div。我想让cs-summary 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>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;
}

Answer 2

从float:left ...

中删除.cs-summary

可能会在margin-right: 5px上使用.cs-image或其他内容来获取它们之间的空格。

Answer 3

您是否考虑过not using floats at all，或者您是否必须在8之前支持IE的版本？

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

.container > div {
    display: table-cell;
    vertical-align: bottom;
}
.cs-image {
    border: 2px solid red;
}

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

Answer 4

当向左或向右浮动时（如您的示例所示），DIV标记将自动扩展为其中的内容。你可以做两件事来解决你的问题：

在包含文字的div上定义宽度
不是使用div标记和段落标记（<div><p>text here</p></div>）包装文本，而是从段落标记周围删除DIV，并在段落标记中添加float:left。例如：<p style="float:left;">text here</p>"

Answer 5

正如猎人和用户671670指出的那样，你必须使用宽度。两个元素必须适合容器才能彼此相邻显示。您可以更改HTML并将图像放在文本中并向左浮动，如下所示：

 <p>Texty text text McTexterson likes to text.
    Why is div getting shoved down?<img style="float:left" ... /></p>

Answer 6

这是你的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title></title>
    <style type="text/css">
    .container {
    overflow: hidden;
    border: 2px solid #0f0;
    width: 10px;
    margin-bottom: 1em;
    width: 400px;
}

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

.cs-summary {
    font-size: 0.8em;
    border: 2px solid blue;
    margin-left: 1em;
}
    </style>
</head>
<body>

    <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>
</body>
</html>

只需从cs-summary中删除浮动。

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

6 个答案: