Question

好的，这就是我的......

         <section id = "main"><!--main section -->
            <h2> Latest Work... </h2>
            <section class="examples"><a href="#"><img src="images/eg.jpg" alt="example"></a> </section>
            <section class="examples"><a href="#"><img src="images/eg.jpg" alt="example"></a> </section>
        </section><!-- end of main section -->

好的，现在我不明白我将如何在一行中排列这3个部分..我试过显示：inline-block;似乎什么都没有用。我需要在css文件或img中定位部分？或两者？救命！大声笑谢谢:)）

确定iv在你的帮助下设法做到了......我现在如何将它们集中在一起？

Answer 1

我认为你有一些无效的HTML，改为

<section id = "main"><!--main section -->
            <h2> Latest Work... </h2>
            <span class="examples"><a href="#"><img src="images/eg.jpg" alt="example"></a> </span>
            <span class="examples"><a href="#"><img src="images/eg.jpg" alt="example"></a> </span>
        </section><!-- end of main section -->

Answer 2

最后，添加：

<br style="clear:both"/>

Answer 3

在你的CSS中添加它。根据需要更改宽度

 h2,.examples
    { {float:left;
    margin-left:10px}}

Answer 4

您可以尝试这样的事情：

h2, .examples {
    float:left;
    margin: 10px;    
    display:block;
}

您可以在此处查看http://jsfiddle.net/Phenix/Mwtdb/

如何连续3个部分

4 个答案: