与两个并排divs的问题

因此，我正在构建一个页面，将由多家公司使用，但我有一些问题。在第一个例子中，仅使用两个div的代码，看起来很好，但我希望每行之间有一定的空间。我也发布了下面的CSS。然后在第二个链接中，我将代码粘贴到将使用代码的公司之一的布局中。它看起来更好，但它推动了侧边栏。与两个并排divs的问题

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>

来源

2012-12-20 deadendstreet

＃1和＃2：

把包装DIV围绕各排。既然你是浮动的子元素的包装也需要以浮动为它尊重内心的高度，使你的利润会推一个兄弟：

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

对于＃3：

您需要学习responsive web design。

来源

2012-12-20 16:22:30 UpHelix

谢谢......你们俩都给出了有用的答案。现在正在工作。 – deadendstreet

首先，你还没有关闭.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%; 
}

来源

2012-12-20 16:20:53 Andy

与两个并排divs的问题

回答

相关问题