在對齊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即可關閉彈性版面。