css - 两个并排的 div 有问题

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。由于您正在 float 子元素，因此 wrapper 也需要 float 以使其符合内部高度，以便您的边距将插入 sibling :

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

对于#3:

你需要学习responsive web design .