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的右側

回答

相關問題