Question

我的问题是我在左边有这个浮动的元素。每个元素都有隐藏的子元素和一些文本。我希望它们彼此相邻（如果有空间），就像在demo中一样。

点击图片后，会显示隐藏的子元素。它可以正常使用左侧的元素（就像在演示中一样），但我的右侧有问题。当我点击这边的元素时，左侧有足够的空白区域。

我该怎么办？

这是我的代码：

HTML：

<div id="main">
        <section>
            <article class="articles">
                <img src="http://ib1.keep4u.ru/b/070815/ef2714da63d5940bf5.jpg"/>
                <section class="text">
                    <p>*some text*</p>
                </section>
            </article>
            <article class="articles">
                <img src="http://theconceptartblog.com/wp-content/uploads/public_html/dev3/wp-content/uploads/07/GEARS3-imgs-05.jpg"/>
                <section class="text">
                    <p>*some text*</p>
                </section>
            </article>
            <article class="articles">
                <img src="http://blog.art21.org/wp-content/uploads/2011/08/imgs-189.jpg"/>
                <section class="text">
                    <p>*some text*</p>
                </section>
            </article>
            <article class="articles">
                <img src="http://www.klafs.com/media/klafs/imgs-700x394_49_c1_5d_64_fee67da23384276e60644482670c3f22"/>
                <section class="text">
                    <p>*some text*</p>
                </section>
            </article>
            <article class="articles">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtX4Yk1Sxew5RqlARZHKoSnePwp86PVCOpmfTkE9bGCL2Iffic"/>
                <section class="text">
                    <p>*some text*</p>
                </section>
            </article>
            <article class="articles">
                <img src="http://89.152.245.33/DotNetNuke/Portals/SecureChains/Images/imgs.jpg"/>
            </article>
        </section>
    </div>

CSS：

.articles {
    position: relative;
    float: left;
    width: 49.8046875%;;
    min-height: 100px;
}
.articles img {
    height: 100px;
    width: 100%;
}
#main {
    font-size: 0;
}
p {
    margin: 0;
    font-size: 16px;
}

感谢您的建议。

Answer 1

您需要指定骑行侧的每个元素的浮动。您可以使用:nth-child(even)：

执行此操作

.article:nth-child(even) {
    float: right;
}

如果您想使用更复杂的网格系统，您需要一些JavaScript或使用CSS flexbox属性。

如果你决定使用JavaScript，可以使用几个jQuery插件。

扩展浮动元素后的空白区域

1 个答案: