在对齐HTML5中的3列时遇到问题

Question

这是我的网页当前显示的方式：

我希望所有三个都水平相邻。 我试过调整填充和宽度，但这并不能解决。 这是我目前拥有的HTML：

<style>
  /* Create three equal columns that floats next to each other */
  .column {
    float: left;
    width: 30%;
    padding: 15px;
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  /* Responsive layout - makes the three columns stack on top of 
  each other instead of next to each other if web browser size is reduced */
  @media screen and (max-width:600px) {
    .column {
      width: 100%;
    }
  }
</style>

这是div：

  <div class="row">
    <div class="column">
      <h2>Column</h2>
      <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>

    <div class="column">
      <h2>Column</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>

    <div class="column">
      <h2>Column</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>
  </div>

Answer 1

只需在列内添加wrapper div，然后对其进行填充即可。 如果将padding应用于column ，它将增加30％的宽度，这就是导致问题的原因。

 /* Create three equal columns that floats next to each other */ .column { float: left; width: 30%; } .column .content { padding: 15px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other if web browser size is reduced */ @media screen and (max-width:600px) { .column { width: 100%; } } 

 <div class="row"> <div class="column"> <div class="content"> <h2>Column</h2> <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> </div> <div class="column"> <div class="content"> <h2>Column</h2> <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> </div> <div class="column"> <div class="content"> <h2>Column</h2> <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> </div> </div> 

使用CSS网格的另一种方法

 .row { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1em; } 

 <div class="row"> <div class="column"> <h2>Column</h2> <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> <div class="column"> <h2>Column</h2> <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> <div class="column"> <h2>Column</h2> <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> </div> 

Answer 2

Flexbox是此类布局的理想解决方案。 请注意，媒体查询会将对齐方式更改为小屏幕的垂直布局，而不是大屏幕的水平布局。

为了完整起见，我还为跨浏览器兼容添加了供应商前缀。

 .row { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -webkit-flex; /* NEW - Chrome */ display: -moz-flex; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: 100%; /* needed for IE 11 */ flex-direction: row; } .column { flex-grow:1 } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other if web browser size is reduced */ @media screen and (max-width:600px) { .row { flex-direction: column } } 

 <div class="row"> <div class="column"> <h2>Column</h2> <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> <div class="column"> <h2>Column</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> <div class="column"> <h2>Column</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> </div> 

Answer 3

之所以无法按预期工作，是因为每列的宽度不是您所期望的30％ ，而是30％加上15px padding 。 您可以通过设置box-sizing: border-box;来解决此问题box-sizing: border-box; 在列上。 这告诉浏览器在宽度中包括填充，这通常更容易使用（因此，在这种情况下，这意味着您的列将始终为30％的宽度，我认为这是您期望的）。

但是 ，最好在此处采用其他方法进行布局。 可以使用flexbox而不是使用float来以更现代，更可靠的方式处理这种布局。 如果您希望列扩展为恰好填充可用宽度的1/3，则可以使用以下样式：

.row {
  display: flex;
  flex-direction: row;
}

...这就是您所需要的！ 然后，您可以在列中添加任意数量的填充，并且它们的宽度仍将符合预期。 在您的媒体查询（用于窄版面）中，只需将.row设置为display: block即可关闭弹性版面。