0

是否可以使用 css 像报纸一样更改布局，以便文章在移动设备和桌面上按顺序显示，而无需使用双 dom 元素或 javascript（文本当然假设动态加载）

见jsfiddle

或代码

<div style="width:100%">
<div class="innerWrapper">
    <h4>1</h4>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
</div>
<div class="innerWrapper">
    <h4>2</h4>
    <p>
        Lorem ipsum
    </p>
</div>
<div class="innerWrapper">
    <h4>3</h4>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
</div>
<div class="innerWrapper">
    <h4>4</h4>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
</div>

css

    .innerWrapper{
    width:49%;
    float:left;
    border:1px gray solid;
}
@media only screen and (max-width: 400px) {
    .innerWrapper{
        width:100%;
        float:left;
        border:1px gray solid;
    }
}
4

0 回答 0