HTML / CSS：使边框右侧高度动态化

Question

我正在处理一个巨大的遗留代码，所以这就是为什么HTML风格很糟糕的原因。我必须与我所拥有的一起工作，所以我真的不想尝试修复它并弄乱一切。

我正在尝试使border-right height动态化（占据列的最长高度）。

以下是我正在使用的jsfiddle：http://jsfiddle.net/XmKrm/616/

#ColumnOne,
#ColumnTwo,
#ColumnThree,
#ColumnFour {
  float: left;
  border-right: 1px solid;
}

CSS

function largestOfFour(arr) {
  var main = [];
  for(k=0;k<arr.length;k++){
     var long=0;
       for(i=0;i<arr[k].length;i++){
          if(long<arr[k][i]) {
              long=arr[k][i];
          }
       }
   main.push(long);
   }
  return main;
}

Answer 1

＆＃13;

＆＃13;

#ColumnOne,
#ColumnTwo,
#ColumnThree,
#ColumnFour {
  border-right: 1px solid;
  display: table-cell;
  vertical-align: top;
}

＆＃13;

<div id="ColumnOne">
  <div class="Coltop">SAMPLE TITLE</div>
  <div class="ColMid">
    <table style="width: 100%">
      <tr>
        <td>111
          <br/> 111
        </td>
      </tr>
    </table>
  </div>
</div>
<div id="ColumnTwo">
  <table style="width: 100%">
    <tr>
      <td>222</td>
    </tr>
  </table>
</div>
<div id="ColumnThree">
  <table style="width: 100%">
    <tr>
      <td>333 333
        <br> 333
        <br> 333
      </td>
    </tr>
  </table>
</div>
<div id="ColumnFour">
  <table style="width: 100%">
    <tr>
      <td>444 444
      <br> 444 444
      <br> 444 444
      <br> 444 </td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Flexbox可以做到这一点

#ColumnOne,
#ColumnTwo,
#ColumnThree,
#ColumnFour {
  border-right: 1px solid;
  float: left;
}
#MAIN {
  display: flex;
}

<div id="MAIN">

  <div id="ColumnOne">
    <div class="Coltop">SAMPLE TITLE</div>
    <div class="ColMid">
      <table style="width: 100%">
        <tr>
          <td>111
            <br/>111
          </td>
        </tr>
      </table>
    </div>
  </div>
  <div id="ColumnTwo">
    <table style="width: 100%">
      <tr>
        <td>222</td>
      </tr>
    </table>
  </div>
  <div id="ColumnThree">
    <table style="width: 100%">
      <tr>
        <td>333 333
          <br>333
          <br>333</td>
      </tr>
    </table>
  </div>
  <div id="ColumnFour">
    <table style="width: 100%">
      <tr>
        <td>444 444
          <br>444 444
          <br>444 444
          <br>444</td>
      </tr>
    </table>
  </div>
</div>

Answer 3

您可以使用jQuery height方法获取每列的高度，将它们放入数组中，然后使用JavaScript Math.max函数计算最大高度：

＆＃13;

＆＃13;

$(function() {
  var arr = [
    $("#ColumnOne").height(),
    $("#ColumnTwo").height(),
    $("#ColumnThree").height(),
    $("#ColumnFour").height()
  ];
  $("#ColumnOne, #ColumnTwo, #ColumnThree, #ColumnFour").height(Math.max.apply(Math, arr));
});

＆＃13;

#ColumnOne,
#ColumnTwo,
#ColumnThree,
#ColumnFour {
  float: left;
  border-right: 1px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ColumnOne">
  <table style="width: 100%">
    <tr>
      <td>111
        <br/>111
      </td>
    </tr>
  </table>
</div>
<div id="ColumnTwo">
  <table style="width: 100%">
    <tr>
      <td>222</td>
    </tr>
  </table>
</div>
<div id="ColumnThree">
  <table style="width: 100%">
    <tr>
      <td>333 333
        <br>333
        <br>333</td>
    </tr>
  </table>
</div>
<div id="ColumnFour">
  <table style="width: 100%">
    <tr>
      <td>444 444
        <br>444 444
        <br>444 444
        <br>444</td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;