Question

以下代码完全像一张桌子。当我缩小页面时，我希望它首先名字为foo，然后是名字 - foo last。我被困在这里。我明白我需要使用“@media 只有屏幕和（最大宽度：760px），（min-device-width：768px）和（max-device-width：1024px）“这里。但之后我就迷失了。先谢谢你。

<div id="Main">
    <section id="sub">
        <div>First Name</div>
        <div>Last Name</div>
        <div>Middle Name</div>
    </section>
    <section id="sub2">
        <div>foo first</div>
        <div>foo Last</div>
        <div>foo Middle</div>
    </section>
</div>

Answer 1

您可以像下面一样修改HTML。使所有div元素向左浮动，固定宽度为49％或50％。当它有空间时，它将并排浮动，当没有足够的空间浮动时，第二个div将会向下移动。在这种情况下可能不需要媒体查询，除非它是您的设计约束。

Css在这里： #Main section div {float：left;宽度：50％;} HTML在这里：

<div id="Main">
    <section id="sub">
        <div>First Name</div>
        <div>foo first</div>
    </section>
    <section id="sub1">
        <div>Last Name</div>
        <div>foo Last</div>
    </section>
    <section id="sub2">
        <div>Middle Name</div>
        <div>foo Middle</div>
    </section>
</div>

如何将其作为块元素？

1 个答案: