浮动和清除五段标签答案

【问题标题】：Floating and clearing five section tags浮动和清除五段标签
【发布时间】：2012-10-04 04:42:45
【问题描述】：

我有五个要浮动的部分标签，以便它们彼此内联。我过去曾使用过 float / clearfix 技术，它已经奏效了。我无法弄清楚我做错了什么。

CSS:


    #content{ padding:30px 0 0 15px; width: 959px; }

    .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

    .clearfix {
    display: inline-block;
}

     html[xmlns] .clearfix {
    display: block;
}

    *html .clearfix {
    height: 1%;
}

#1, #2, #3, #4, #5 {padding-right:15px; float: left;}



HTML:
    <div id="content">      
      <section id="1">
        <img src="1.png" />
      </section>

      <section id="2">
        <img src="2.png" />
      </section>

      <section id="3">
        <img src="3.png" />
      </section>

      <section id="4">
        <img src="4.png" />
      </section>

      <section id="5">
        <img src="5.png" />
      </section>

     </div><!-- end content-->

      <div class="clearfix"></div>

【问题讨论】：

我同意@Asad，为什么内联块还不够？这不就是你想要达到的吗：jsfiddle.net/2SMsU

标签： html css-float clearfix

【解决方案1】：

您不应该将您的部分设置为 inline-block/floated 而不是 clearfix 吗？

【讨论】：

【解决方案2】：

id 属性必须以字母 (a-z) 开头 - 因为您的 id 只是数字，它们是无效的，因此永远不会匹配。

将您的 ID 从 1、2、... 更改为 section1、section2、...

【讨论】：