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

这里很简单的设置，我只是想让两个div并排坐在一起。图片在左边，文字在右边。出于某种原因，如果文本太长，它会推低div。我想只是把CS-DIV总结理解，它应该换为了不跳了下来喜欢它的文字是：CSS - 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>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值对文本的宽度进行硬编码，我只是希望它符合并“知道”它的边界。

在此先感谢。

来源

2011-05-05 CaptSaltyJack

如果您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; 
}

来源

2011-05-05 17:32:44 hunter

请参阅，令人不安的是，.container p左边距被忽略。为什么？ – CaptSaltyJack 2011-05-05 17:42:39

好的，奇怪..如果我给了18em的余裕，那么它缩进。这就像p的左边缘在img下面。总的困惑...... – CaptSaltyJack 2011-05-05 17:45:37

如果你想让这个空白左边的工作，你需要一个设置'width'和'display：inline-block;'：http://jsfiddle.net/hunter/5Huau/12/ – hunter 2011-05-05 17:46:36

取出float:left从.cs-summary ...

，可能使用margin-right: 5px或东西就.cs-image让他们之间的空间。

来源

2011-05-05 17:31:41 Syjin

从cs-summary中删除float：left使得它的margin-left无效。但是，我可以在cs-image上放置保证金，这很有效。不知道这个..我想从左到右排列一堆divs，他们都必须被漂浮左边？ – CaptSaltyJack 2011-05-05 17:33:02

CaptSaltyJack - 不一定。这取决于你想如何交互对象。看看这篇关于花车的文章：http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/ – Shauna 2011-05-05 17:35:31

你可以使用padding-left属性。 – Raze 2011-05-05 17:39:19

你有没有考虑过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; 
}

来源

2011-05-05 17:31:56 robertc

浮动在IE7中工作得很好。实际上，奇怪的是，我的jsfiddle在IE7中看起来很完美，但在Chrome中看起来不错。奇怪的。 – CaptSaltyJack 2011-05-05 17:38:55

@CaptSaltyJack他们不这样做，否则他们在IE7中看起来和Chrome中的一样。但我所做的一点是，最好不要使用浮动，因为你不必支持IE7。 – robertc 2011-05-05 18:08:22

当浮动向左或向右（如你的例子说明），DIV标签将自动展开，以在其中的内容。你可以做两两件事来解决问题：

上包含文本
而是包装用div标签和一个段落标记（<div><p>text here</p></div>）文本的DIV定义的宽度，请从DIV围绕段落标记添加一个float:left到段落标记。例如：<p style="float:left;">text here</p>"

来源

2011-05-05 17:34:50

作为猎人和用户671670已经指出，你必须使用宽度。两个元素都必须放入容器中才能彼此相邻显示。你可以改变你的HTML和图像放在里面的文字和浮它留下，就像这样：

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

来源

2011-05-05 17:42:04 wosis

这里是你的代码

<!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-摘要中删除浮动。

来源

2011-05-05 17:44:40 NewUser

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

回答

相关问题