左邊的浮動div與下邊框的尺寸不一樣

我的設計師在很多設計中都使用這種技術，我不能決定這種方法，所以它的自動流暢性（當它進入cms）左邊的浮動div與下邊框的尺寸不一樣

基本上，當浮動一個2列div結構時，我希望每個div都有一個底部邊框。我會把邊框放在一個包裹元素上，但是兩個div之間需要有一個空白（margin-right）。問題在於兩個div根據內容的不同而不同。身高：100％似乎無法做到這一點（甚至在將父母作爲100％時）。我需要兩個divs的邊界相互保持一致。

附加是一些示例代碼前任何格式的CSS只有成功的方式，我已經能夠做到這一點是通過設置每個容器的高度，在這種情況下不會工作，需要流體。

謝謝！

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>What's the best way?!</title> 
<style type="text/css"> 
div.col50>div{width:45%; float:left; border-bottom:1px solid #000;} 
div.col50>div+div{margin:0 0 0 5%;} 

div.col50+div.col50{margin:50px 0 0;} 

div.col50:before, div.col50:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
div.col50:after { clear: both; } 
div.col50{zoom:1;} 
</style> 
</head> 

<body> 
<div class="col50"> 
    <div> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    <div> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
    </div> 
</div> 
</body> 
</html>

來源

2011-09-07 Roi

你想要每個div的底部邊界相互保持水平嗎？ – kinakuta

正是我所需要的 – Roi

退房此鏈接： http://web.hc.lv/kods/css/raksti/2-kolonnu-majaslapas-izkartojums-ar-css/ （例如，下面提供：http://web.hc.lv/inc/Upload/articles_40/File/2kolonas.html）

來源

2011-09-07 02:25:27

關閉 - 我可以通過背景顏色來做到這一點 - 這是底部邊界，成爲一個問題。 – Roi

設法使3 <div>的：

左<div>與float:left;width:45%;margin-right:5%;

右<div>與float:right;width:50%;

底部<div>與clear:both;width:100%;

內側底部<div>您可以創建兩個<div>的邊境（飄然左和右）。

來源

2011-09-07 03:20:42

我最終解決了這個問題，讓下一行的div有一個頂部邊框，而不是底部邊框謝謝！ – Roi

左邊的浮動div與下邊框的尺寸不一樣

回答

相關問題