Question

我似乎无法做到这一点。我一直在努力找到一个解决方案，能够拥有3个内联块元素，这些元素将成为具有垂直边框的最高内容。正是这种边界使得这么困难。如果我不需要边界，我会没事的但我离不开它们。

我的作品有点......如果我调整浏览器窗口的大小，左边的元素是最高的，一切看起来都很好;边界都是100％，父div随着里面的内容而增长。

但是，如果中心或右侧div具有最高内容，则垂直边界不足100％。我想解决这个问题，我会给中间和右边的元素一个100％的高度。当我调整大小时，这确实将边框带到了地面，但是现在，父母不再以最高元素增长并且内容流出。请参阅附图。

有人可以帮我解决这个问题吗？ Live on JSBin

<!DOCTYPE html>
<html>
  <head>
    <style>
      #wrapper {
        float:left;
        width:100%;
        border-top:1px solid #000;
        border-bottom:2px solid #000;
      }
      #wrapper .col {
        float:left;
        width:33%;
        display:inline-block;
      }
      #wrapper .col:nth-child(1) {
        border-right:2px solid #000;
     }
      #wrapper .col:nth-child(2) {
        border-right:2px solid #000;
        height:100%;
      }
      #wrapper .col div {
        padding:10px;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
      $(window).on('load resize', function(){
        var $div = $('#wrapper .col');
        var max = 0;
        $.each($div, function(){
          if(parseInt($(this).outerHeight()) > max){
            max = parseInt($(this).outerHeight())
            $("#wrapper").css('height', max + 'px');
          }
        });
      }).resize();
    </script>
  </head>
  <body>
    <div id="wrapper">
      <div class="col">
1<br>
1<br>
1<br>
      </div>
      <div class="col">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
      </div>
      <div class="col">
1<br>
1<br>
      </div>
    </div>
  </body>
</html>

这就是它的样子： enter image description here

修改

我想补充一点，如果有人有更好的方法来实现我想要做的事情，那我就非常开放。

Answer 1

问题是，float: left;，你不能使用CSS告诉他们他们的容器的高度了。

我希望有一个更好的整体HTML / CSS解决方案（不要拍我，但这看起来很像桌子），但有了这个标记，你最好的选择可能是直接调整元素：{{3} }

$(window).on('load resize', function(){
  var $div = $('#wrapper .col');
  var max = 0;

  // let them all size naturally
  $div.css('height', '');

  // now find the max
  $div.each(function(){
    var $this = $(this),
        height = $this.outerHeight();
    if (height > max) {
      max = height;
    }
  });
  // then apply it
  $div.each(function(){
    $(this).css('height', max);
  });
}).resize();

Answer 2

你不需要javascript来做这件事，你可以用html和css来做。

http://jsfiddle.net/wf_4/Puu3u/

的CSS：

 #wrapper {
    width:100%;
    border-top:1px solid #000;
    border-bottom:2px solid #000;
    display:table;
  }
  #wrapper .col {
    width:33%;
    display:table-cell;
  }
  #wrapper .col:nth-child(1) {
    border-right:2px solid #000;
 }
  #wrapper .col:nth-child(2) {
    border-right:2px solid #000;
  }
  #wrapper .col {
    padding:10px;
  }

HTML：

<div id="wrapper">
    <div class="col">
       1<br />
       1<br />
       1<br />
    </div>
    <div class="col">
       1<br />
       1<br />
       1<br />
       1<br />
       1<br />
       1<br />
       1<br />
       1<br />
    </div>
    <div class="col">
       1<br />
       1<br />
    </div>
</div>

如何使用JQuery使父元素与内容一起增长

2 个答案: