與兩個並排divs的問題

Question

因此，我正在構建一個頁面，將由多家公司使用，但我有一些問題。在第一個例子中，僅使用兩個div的代碼，看起來很好，但我希望每行之間有一定的空間。我也發佈了下面的CSS。然後在第二個鏈接中，我將代碼粘貼到將使用代碼的公司之一的佈局中。它看起來更好，但它推動了側邊欄。

http://tinyurl.com/bo6ukqe

http://tinyurl.com/cerzfwd

所以我很好奇，什麼是解決這一問題的最佳途徑。我需要左邊的div和右邊的div來排隊。目前

1. 我想要左邊和右邊的div排隊。意思是，兩者都是一樣的高度。
2. 我想如果每行之間有一點點的空間。目前，這些圖片是彼此重疊的。
3. 我想正確的div的大小取決於它有多少空間。因此，與其說一家公司必須擁有55％的側邊欄，那麼另一家公司必須將其更改爲80％，因爲它沒有側邊欄。

這裏的CSS如果你喜歡沒有通過上面的鏈接代碼挖：

<style type="text/css"> 
.body { border : 1pt solid black; } 
.left { clear: left; float : left; width:226px; height:127px; } 
.right { float : right; width : 80%; } 
.spacer { clear : both; height: 10px; } 
img { border: none; } 
p.description { 
line-height:18px; 
color:#767676; 
font-size:12px; 
} 
p.description a { 
font-weight:bold; 
} 
a.read-more-link { 
border-top:none; 
text-transform: uppercase; 
margin:0; padding:0; 
font-size:10px; 
} 
.read-more a { 
border-top:none; 
display: block; 
text-align: right; 
text-transform: uppercase; 
margin:15px 0 0 0; padding:0; 
text-decoration: none; 

} 

</style> 

Answer 1

＃1和＃2：

把包裝DIV圍繞各排。既然你是浮動的子元素的包裝也需要以浮動爲它尊重內心的高度，使你的利潤會推一個兄弟：

<div style="float: left; width: 100%; clear: both; margin: 0 0 10px 0;"></div><!-- wrapper row --> 

對於＃3：

您需要學習responsive web design。

Answer 2

首先，你還沒有關閉.content_left只是<div class="content_right"></div>

之前，做到這一點通過增加 </div>

然後封裝以下每個在一個<div class="row"></div>

<div class="left"></div><div class="right"></div>

再加入

.row { 
padding: 5px 0; 
margin-left: 0; 
margin-right: 0; 
width: 60%; 
} 

然後

.content_right { 
width: 40%; 
}