我的浮动元素被拉得太靠左了

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

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

The modified version (without padding) on fiddle

现在不是“向左拉得太远”。

您可以做的是将 margin:25px; 添加到 .third class，如下所示：

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 class 具有浅灰色背景颜色，仅用于测试和显示弯曲边框和其中的居中图像。
我还在 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>

语义在 article 周围有 section 而不是 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，则文章 padding/margin 使用流体 width。

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

我的浮动元素被拉得太靠左了

My floated elements are being pulled too far to the left

html

css

wordpress

position

css-selectors