Question

http://jsfiddle.net/dx6m9/

    <style>
    .floated {float: left;}
    .container {width: 100%;}
    .left, .right {
        width:60%; 
        box-sizing:border-box; 
        padding:10px;
}
    .left {width:40%; border-right: 1px dotted #dddddd;}
    .clearfix {clear:both;}
    </style>

    <div class="container">
      <div class="floated left">
          Ahoj
        </div>
        <div class="floated right">
            Nazdar
            <br />
            Ahoj
            <br />
             Nazdar
            <br />
            Ahoj

        </div>
     <div class="clearfix"></div>
    </div>

如何强制右边框总是长这两个浮点数？该边框应该像分隔符一样。

Answer 1

尝试：

.floated {display:table-cell;}
.container {width: 100%;display:table}

Fiddle here.

Answer 2

这只能通过任何一个表（在标记中作为<table>或在CSS中使用table-cell）或使用背景图像来实现，如Faux Columns中所述。

这个问题以某种形式在本网站上被提出了很多问题。尝试在css中搜索“相等高度列”，你会发现很多类似的回复。

Answer 3

我会通过添加第3个分隔符div Fiddle并将其设置为剩余40％来实现此目的。

.sep {
    position: absolute;
    left:40%;
    top:0;
    bottom:0;
    border-left: 1px dotted #ddd;
}
.container {
    width: 100%; 
    position:relative
}

Answer 4

在这里，您可以找到您想要的内容：http://jsfiddle.net/stryd3r/dx6m9/5/

使用简单的Jquery函数：

$( document ).ready(function() {
   var maxHeight=$( '.left' ).height();
    if  ($( '.right' ).height()>maxHeight)
        maxHeight=$( '.right' ).height();
    $( '.dotted' ).css('height',maxHeight);
});

两个浮点div的css分隔符

4 个答案: