2

所以我正在构建一个可供多家公司使用的页面，但我遇到了一些问题。在第一个示例中，只有两个 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>
4

2 回答 2

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%;
}
于 2012-12-20T16:20:53.887 回答
1

对于 #1 和 #2：

在每一行周围放置一个包装器 div。由于您正在浮动包装器的子元素，因此也需要浮动以使其尊重内部高度，以便您的边距将推动兄弟：

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

对于#3：

您将需要学习响应式网页设计。

于 2012-12-20T16:22:30.600 回答