Html 底部边框大小不相同的左浮动div_Html_Css_Css Float

Html 底部边框大小不相同的左浮动div

html css

Html 底部边框大小不相同的左浮动div,html,css,css-float,Html,Css,Css Float,我的设计师在很多设计中都使用了这种技术，我无法决定使用css的最佳方式，所以它在进入cms时自动流动基本上，当浮动一个2列div结构时，我希望每个div都有一个底部边框。我会将边框放在一个包装元素上，但两个div之间需要有一个间隙。问题是这两个div的大小因内容而异。身高：100%似乎不会做的把戏，即使使家长100%。我需要两个分区的边界保持水平附加的是一些在任何css格式之前的示例代码-我唯一成功的方法是设置每个容器的高度，在这种情况下，这将不起作用，需要是流体谢谢 <!DOCTY

我的设计师在很多设计中都使用了这种技术，我无法决定使用css的最佳方式，所以它在进入cms时自动流动

基本上，当浮动一个2列div结构时，我希望每个div都有一个底部边框。我会将边框放在一个包装元素上，但两个div之间需要有一个间隙。问题是这两个div的大小因内容而异。身高：100%似乎不会做的把戏，即使使家长100%。我需要两个分区的边界保持水平

附加的是一些在任何css格式之前的示例代码-我唯一成功的方法是设置每个容器的高度，在这种情况下，这将不起作用，需要是流体

谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>What's the best way?!</title>
<style type="text/css">
div.col50>div{width:45%; float:left; border-bottom:1px solid #000;}
div.col50>div+div{margin:0 0 0 5%;}

div.col50+div.col50{margin:50px 0 0;}

div.col50:before, div.col50:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
div.col50:after { clear: both; }
div.col50{zoom:1;}
</style>
</head>

<body>
<div class="col50">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    </div>
</div>
</body>
</html>

试着做3个：

左浮动：左；宽度：45%；保证金权利：5%

右浮动：右；宽度：50%

底部有清晰的：两者都有；宽度：100%

在底部内部，您可以创建两个左右浮动边框的分区。

您希望每个分区的底部边框彼此保持水平吗？我最终解决了这个问题，使下一行分区具有顶部边框，而不是底部边框，谢谢！