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值。

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

3 个答案: