带分隔符边框的两列

我想要有两列带分隔符的边框。带分隔符边框的两列

当柱子高度相同时，任务非常简单。

但是，如果列的高度不同，并且您不知道哪个是更高的列（并且我不想使用固定值），我该如何解决问题？

背景颜色是一样的。

纯CSS解决方案是最好的。如果不可能，也可以接受JavaScript代码。

Click here for the current example。

来源

2011-09-21 antonjs

您可以设置容器来table显示器和左，右列table-cell

#container { 
display: table; 
    width: 100%; 
} 
#content-left { 
    border-right: 4px dotted #000; 
    width: 50%; 
    display: table-cell; 
    margin-right: -4px; 
} 
#content-right { 
    width: 50%; 
    display: table-cell; 
}

然后你只需要包装的左侧和右侧列在容器中，你拥有它。

<div id="wrapper"> 
    <div id="container"> 
     <div id="content-left">left</div> 
     <div id="content-right">right<br />right<br />right</div> 
    </div> 
    <div id="footer"> 
     footer content 
    </div> 
</div>

Look Here

来源

2011-09-21 17:23:31 rlemon

当然，这是假设你不在乎支持IE7和以下...不是我说你应该在乎;） – jbyrd

谁甚至在乎支持IE8 +，我意思是认真的.. RTFD微软。标准的制定是有原因的，如果一个主要参与者不遵守上述标准，他们就不应该接受。不，我们应该疏远他们并拒绝参与/使用他们的产品和/或服务。除了windows .. Linux（任何发行版）还不够强大，而我*不会购买mac * – rlemon

我建议你阅读约faux columns。如果你负担不起时间（不是那么多，但是......），那么使用JS你可以简单地检查哪一个更高，并设置另一个的最小高度。
我认为这会按照你的意愿工作。但我建议你改为了解人造专栏。

来源

2011-09-21 17:13:03 ANeves

也许这样的事情是你在找什么：

http://jsfiddle.net/euYTQ/40/

HTML：

<div class="container"> 
    <div class="left">section left</div> 
    <div class="right">section right<br>other row</div> 
    <div class="footer">section footer</div> 
</div>

CSS：

div.container { 
    position:absolute; 
    background:#eee; 
    margin: 0 auto; 
    width: 750px; 
    height:100%; 
} 
.left{ 
    position:absolute; 
    left:0px; 
    top:0px; 
    bottom:50px; 
    width:48%; 
    border-right-style:dotted; 
} 
.right { 
    position:absolute; 
    right:0px; 
    top:0px; 
    bottom:50px; 
    width:48%; 
    border-right-style:dotted; 
} 
.footer { 
    position:absolute; 
    background: none repeat scroll 0 0; 
    bottom: 0px; 
    height:50px; 
    left:0px; 
    right:0px; 
    border-top-style:dotted; 
}

来源

2011-09-21 17:25:43

一个CSS方法是使用重复的背景图像的虚线 - 这重复的推移周围的2列一个div，像这样：

http://jsfiddle.net/P5Z9s/（很明显，你会得到一个更好的形象，我刚拔掉这从谷歌）

或者使用jQuery，你可以这样做：

http://jsfiddle.net/ntWRY/（你基本上是相同的类添加到要均衡，一列然后调用该类的功能）

来源

2011-09-21 17:35:43 jbyrd

带分隔符边框的两列

回答

相关问题