Question

无论任何列中的内容高度如何，如何使两个垂直边框均匀增长？

<body style="margin:0;padding:0;">
  <div style="min-height:500px;width:100%;margin:auto;border-top:2px solid #333;border-bottom:2px solid #333;">
    <div style="min-height:496px;float:left;width:23%;border-right:2px solid #333;padding:0 5px;">
      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>
    </div>
    <div style="min-height:496px;float:left;width:33%;padding:0 5px;">
      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>
    </div>
    <div style="min-height:496px;float:left;width:33%;border-left:2px solid #333;padding:0 5px;">
      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>


      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>


      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>


      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>
    </div>
  </div>
</body>

enter image description here

Answer 1

你需要清除浮动的列，在我的例子中我使用了一个添加的元素（但有MANY个方法可以这样做），并且每列都有height:100%

Demo

另外，您应该使用外部样式表和类，管理内联代码非常困难，因为单独设置每个元素

如何使垂直边框随内容增长

1 个答案: