我漂浮的元素被拉得太远了

Question

我是CSS的新手，我在之前的论坛上寻求过关于这个问题的帮助。我想我做的一切都是正确的，但我的浮动元素被拉到了左边。

这是我的代码：

div {
display: block;
}

.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}

.home {
text-align: center;
float: left;
width: 33.3333333%;
position: relative;
padding: 25px;
}

.third {
display: inline-block;
position: relative;
float: left;
height: 150px;
width: 150px;
border-radius: 25px;
}

.third img {
float: left;
position: relative;
}

而我的HTML：

<div class="grid">
<article class="home">
  <article class="third">
<img src="" /></article>
</article>
    <article class="home">
  <article class="third">
  <img src="" /></article>
</article>
    <article class="home">
  <article class="third">
  <img src="" /></article>
</article>
</div>

请帮忙！

Answer 1

我还不能发表评论......

Your original code on fiddle

问题来自于padding班的.home。 我在padding:25px;类中禁用了.home，因为padding被添加到CSS中的width：

The modified version (without padding) on fiddle

现在它并没有“拉得太远”。 您可以做的是将margin:25px;添加到.third类，如下所示：

The modified version (with margin) on fiddle

编辑：一个清洁的重新版本：

HTML代码：

  <div class="grid">
    <article class="home">
      <div class="third">
        <img src="http://lorempicsum.com/nemo/350/200/1" />
      </div>
    </article>
    <article class="home">
      <div class="third">
        <img src="http://lorempicsum.com/futurama/350/200/6" />
      </div>
    </article>
    <article class="home">
      <div class="third">
        <img src="http://lorempicsum.com/up/350/200/6" />
      </div>
    </article>
  </div>

CSS代码：

.grid {
  width: 660px;
  position: relative;
  float: left;
  padding-bottom: 10px;
  clear: left;
}

.home {
  text-align: center;
  float: left;
  width: 33.3333333%;
}

.third {
  display:table-cell;
  height: 150px;
  width: 150px;
  padding: 25px;
  border-radius:25px;
  vertical-align:middle;
  background-color:#eee; //added just for test display
}

.third img {
  border:none;
  width: 100%;
  height: auto;
}

The result here on fiddle。

图像是适应性的，垂直和水平居中。 .third类具有浅灰色背景颜色，仅用于测试和显示弯曲边框和其中的居中图像。 我还用html代码替换了<article>标签的第二个<div>标签，因为它是多余的。

Answer 2

请使用我认为可以使用的更新代码。

div {
    display: block;
}
.grid {
    width: 660px;
    position: relative;
    float: left;
    padding-bottom: 10px;
    clear: left;
}
.home {
    text-align: center;
    float: left;
    width: 33.3333333%;
    position: relative;
    padding: 25px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.third {
    display:block;
    border-radius: 25px;
}
.third img {
    width:100%;
    height:auto;
}

Answer 3

以下是您可能更正的代码：

See this fiddle

我改变了一点这样的HTML结构：

<section class="home">
  <article class="third">
    <img src="http://lorempicsum.com/futurama/350/200/1" />
  </article>
  <article class="third">
    <img src="http://lorempicsum.com/futurama/350/200/1" />
  </article>
  <article class="third">
    <img src="http://lorempicsum.com/futurama/350/200/1" />
  </article>
</section>

语义在section周围有article而在article周围没有article更好。

我简化了这样的CSS代码：

section.home {
  width: 660px;
  position: relative;
  float: left;
  padding-bottom: 10px;
  clear: left;
}

article.third {
  text-align: center;
  float: left;
  width: 150px;
  position: relative;
  padding: 25px;
  overflow: hidden;    
}

.third img {
  border-radius: 25px;
  width: 100%;
  position: relative;
}

如果你使用液体width作为容器，然后使用液体width作为文章的padding/margin。

在这种情况下，我使用容器的固定width和padding值。