Question

我有一个带有4个内div个的容器div。如何让border-left增长到最大内div的高度？

当页面足够宽时一切都很好，但是当浏览器变窄时，第一个内部div会浮动到多行，这很好，但其他div不匹配。

＆＃13;

.container
{
  float:left;
  border: 1px solid #D1D1D1;
  width:100%;
}

.cell{
  float:left;
  width:24%; /*interesting, x4 25% of a container will not work for 1 row when a boarder comes into play*/
  border-left: 1px solid #D1D1D1;
}

＆＃13;

<div class="container">
  <div class="cell">blah that is too big to fit inside a div that is 25% when the browser is a sensible size...this is made to be very very long... too long, the hope is that it will spill onto two or more rows.  The problem is that the border left for the other divs are for 1 row</div>
  <div class="cell">blah</div>
  <div class="cell">blah</div>
  <div class="cell">blah</div>
</div>

＆＃13;

jsfiddle：https://jsfiddle.net/Sniipe/nomey5b2/

Answer 1

使用flex代替float。

注意browser support。

.container
{
  float:left;
  border: 1px solid #D1D1D1;
  width:100%;
  display: flex;
}

.cell{  width:24%; /*interesting, 4 25% of a container will not work for 1 row when a boarder comes into play*/
  border-left: 1px solid #D1D1D1;
}

<div class="container">
  <div class="cell">blah that is too big to fit inside a div that is 25% when the browser is a sensible size...this is made to be very very long... too long, the hope is that it will spill onto two or more rows.  The problem is that the border left for the other divs are for 1 row</div>
  <div class="cell">blah</div>
  <div class="cell">blah</div>
  <div class="cell">blah</div>
</div>

如果您想支持旧浏览器，可以使用display: table-cell。

.container
{
  float:left;
  border: 1px solid #D1D1D1;
  width:100%;
}

.cell{  width:24%; /*interesting, 4 25% of a container will not work for 1 row when a boarder comes into play*/
  border-left: 1px solid #D1D1D1;
  display: table-cell;
}

<div class="container">
  <div class="cell">blah that is too big to fit inside a div that is 25% when the browser is a sensible size...this is made to be very very long... too long, the hope is that it will spill onto two or more rows.  The problem is that the border left for the other divs are for 1 row</div>
  <div class="cell">blah</div>
  <div class="cell">blah</div>
  <div class="cell">blah</div>
</div>

Answer 2

将async.eachSeries( data, function(item, eachCb){ console.log('out loop on item ' + item); modules.dbCmder.query(DefaultDB, DefaultDB, strSQL2, [], function (res) { data.forEach(function (value, index, array) { console.log('in loop ' + index); }); eachCb(); }); }, function( err ){ console.log("Processing done."); });用于display:flex而不是.container。

div的表格布局，左边框在高度上不均匀

2 个答案: