Html 我的浮动元素被向左拉得太远

我是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>

救命啊

我还不能评论

问题来自

.home

类中的

填充

我已禁用
填充：25px在
.home
类中，因为
填充
被添加到CSS中的
宽度
：


现在它不是“向左拉得太远了”
您可以做的是添加
margin:25px到
。第三个
类，如下所示：



编辑：干净的重新访问版本：

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>



图像是自适应的，垂直和水平居中

.third
类的背景颜色为浅灰色，仅用于测试和显示曲线边框及其内部的居中图像

我还用html代码中的
标记替换了第二个
标记，因为它是多余的。
我还不能评论


问题来自
.home
类中的
填充

我已禁用
填充：25px在
.home
类中，因为
填充
被添加到CSS中的
宽度
：


现在它不是“向左拉得太远了”
您可以做的是添加
margin:25px到
。第三个
类，如下所示：



编辑：干净的重新访问版本：

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>



图像是自适应的，垂直和水平居中

.third
类的背景颜色为浅灰色，仅用于测试和显示曲线边框及其内部的居中图像

我还将html代码中的第二个
标记替换为
标记，因为它是多余的。
请使用更新后的代码，我认为它可以工作

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;
}

请使用更新的代码，我认为它会工作

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;
}

下面是对您的代码的可能更正：


我对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.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;
}

如果对容器使用流体
宽度
，则对物品的
填充/边距
使用流体
宽度

在这种情况下，我使用容器的固定
宽度和
填充
值。
以下是对代码的可能更正：


我对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.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;
}

如果对容器使用流体
宽度
，则对物品的
填充/边距
使用流体
宽度

在这种情况下，我使用容器的固定
宽度和
填充
值。
所有元素都是浮动的？你期望它做什么？你能再解释一下所有元素都是浮动的吗？你期望它做什么？你能再解释一下吗