清除另一個div

我正在嘗試對齊佈局，以便圖像在一排中對齊。清除另一個div

下面是它目前正在做

[screengrab](http://img812.imageshack.us/img812/3867/screengrabs.jpg)

HTML

<div class="p-alignleft"></div> 
<div class="p-alignright"></div>

CSS

.p-alignleft { 
    float: left; 
    margin-right:40px; 
    width:450px; 
    font-size: 1.2em; 
    line-height: 1.4em; 
} 
.p-alignright { 
    float: right; 
    width:450px; 
    font-size: 1.2em; 
    line-height: 1.4em; 
}

來源

2013-05-28 Mark

能否請您發表您的工作代碼。 http://jsfiddle.net/將是有益的。 –

您可以嘗試添加一個[代碼]

[代碼]之後的右邊div下一行 – Neil

如果我理解正確，你有幾個選擇這裏。而不是浮動，我的首選是設置每個div顯示：inline-block;這將使的div排隊彼此相鄰，即使其中一個比另一個高：

div { 
    display: inline-block; 
    vertical-align: top; 
}

工作的示例：http://cdpn.io/ojDEl

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

.wrap {width: 800px;} 
.wrap div {width: 48%; display: inline-block; vertical-align: top; background: #e7e7e7; margin-bottom: 20px;} 

/* temp demo styles */ 
.wrap div {height: 200px;} 
.wrap div.test {height: 300px;} 

</style> 

</head> 
<body> 
<div class="wrap"> 
    <div>Person A</div> 
    <div class="test">Person B</div> 
    <div>Person C</div> 
    <div>Person D</div> 
</div> 
</body> 
</html>

來源

2013-05-28 04:44:54

做到了！謝謝！ – Mark

通過查看拍攝畫面的影像，我想你應該附上每個人的部分在div裏面，並給他們類.p-alignleft或.p-alignright。每兩個人後，使空<div class="clear"></div>風格.clear {clear:both}，所以接下來的兩個人將在同一垂直水平

HTML對齊：

<div class="p-alignleft">Person A</div> 
<div class="p-alignright">Person B</div> 

<div class="clear"></div> 

<div class="p-alignleft">Person C</div> 
<div class="p-alignright">Person D</div>

CSS：

.p-alignleft {float:left} 
.p-alignright {float:right} 
.clear {clear:both}

來源

2013-05-28 04:40:40 kevinamadeus

問題是 - 它的wordpress自定義帖子類型，它們被放入使用此方法的列 - http://perishablepress.com/two-column-horizontal-sequence-wordpress-post-order/ – Mark

使用容器div作爲行元素<div class="row clearfix"><div class="media">...</div></div>
將兩個元素都浮動到左側，並將clear: left在奇數。
使用javascript解決方案將高度設置爲相同。那麼你可以保持清晰的左側，右側，或全部清除一邊。

這樣的事情，你可能需要調整它，它更像是僞代碼：

var maxHeight = 0; 
var items = $('.media'); 
// get the max height of the items 
items.each(function() { 
    var height = parseInt($(this).outerHeight().replace('px', ''), 10); 
    if (maxHeight < height) { 
    height = maxHeight; 
    } 
}); 
// assign the height to all the items 
items.height(height + 'px');

來源

2013-05-28 04:44:07 guzart

清除另一個div

回答

相關問題