Question

所以我正在构建一个将被多家公司使用的页面，但我遇到了一些问题。在第一个例子中，只有两个div的代码，看起来很好，但我想在每一行之间留一些空格。我也在下面发布了css。然后在第二个链接中，我将代码粘贴到将使用代码的公司之一的布局中。它看起来更好，但它会推动侧边栏。

http://tinyurl.com/bo6ukqe

http://tinyurl.com/cerzfwd

所以我很好奇解决这个问题的最佳方法是什么。我需要左边的div和右边的div来排队。目前

我希望左右div排成一行。意思是，两者都是一样的高度。
我想如果每行之间有一点空间。目前，图片正好相互搭配。
我希望正确的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

首先，您尚未关闭.content_left，请在</div>

之前添加<div class="content_right"></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%;
}

Answer 2

对于＃1和＃2：

在每行周围放置一个包装器div。由于你是浮动子元素，包装器也需要浮动，以便它尊重内部高度，这样你的边缘将推动兄弟：

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

对于＃3：

您需要了解responsive web design。

有两个并排div的问题

2 个答案: