如何在div中水平对齐列

Question

我有三个<figure>代码，我想在container div中水平对齐它们。我尝试了浮动左，右和边缘自动的方法，但没有工作。我该怎么办？

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
}
.col {
  width: 33.33%;
  float: left;
}

＆＃13;

<div class="container">
  <figure class="col">
    <img src="http://placehold.it/300x300">
  </figure>

  <figure class="col">
    <img src="http://placehold.it/300x300">
  </figure>

  <figure class="col">
    <img src="http://placehold.it/300x300">
  </figure>
</div>

＆＃13;

＆＃13;

＆＃13;

CodePen

Answer 1

您的overflow:auto;课程只需要container。

将解决方案发布到您的代码和更新后看到差异。例如，添加border:1px solid red;以查看差异。

<强>解决方案

* {
  margin: 0;
  padding: 0;
}

.container {  
  width: 100%;
  border:1px solid red;
  overflow:auto; /*added*/
}

.col {    
    width: 33.33%;
    float: left;
}

<div class="container">
  <figure class="col"">
    <img src="http://placehold.it/300x300">    
  </figure>

  <figure class="col"">
    <img src="http://placehold.it/300x300">    
  </figure>

  <figure class="col">
    <img src="http://placehold.it/300x300">    
  </figure>
</div>

CODEPEN

您的代码段

* {
  margin: 0;
  padding: 0;
}

.container {  
  width: 100%;
  border:2px solid red;
}

.col {    
    width: 33.33%;
    float: left;
}

<div class="container">
  <figure class="col"">
    <img src="http://placehold.it/300x300">    
  </figure>

  <figure class="col"">
    <img src="http://placehold.it/300x300">    
  </figure>

  <figure class="col">
    <img src="http://placehold.it/300x300">    
  </figure>
</div>