根据宽度更改 div 顺序 [重复]答案

【问题标题】：Changing divs order based on width [duplicate]根据宽度更改 div 顺序 [重复]
【发布时间】：2014-03-04 07:25:39
【问题描述】：

我在一个包装器中并排放置了 3 个 div，使用：

    <div id="left"><h1>title left</h1></div>
    <div id="right"><h1>title right</h1></div>
    <div id="center"><img src="img/titleimage.jpg"  alt=""/></div>

像这样与 css 对齐：

#left{
width:250px;
float:left;
margin:200px auto;
position:relative;
}

#right{
width:250px;
float:right;
position:relative;
margin:200px auto;
}

#center{
margin:60px auto;
margin-bottom:0;
width:500px;
position:relative;
float:left;
}

当浏览器窗口变小时，我希望 div 重新排序。我希望它们像这样从上到下显示：

左
对
中心

甚至更好

中心
左
对

有什么想法吗？

【问题讨论】：

使用media query 提供一个断点，在不同的分辨率下设置不同的页面样式。也可以在这里查看：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
如果您使用浮动，那些边距自动不会真正做任何事情。此外，在这种情况下，您没有太多理由进行相对定位，除非您绝对将事物定位在其中。

标签： css html css-float

【解决方案1】：

将中心 div 一直移动到顶部

<div id="center"><img src="img/titleimage.jpg"  alt=""/></div>
<div id="left"><h1>title left</h1></div>
<div id="right"><h1>title right</h1></div>

【讨论】：

【解决方案2】：

我认为这里的关键是从小屏幕优先的方法来考虑这一点。

如果您的项目可以使用 flexbox，那么您可以使用它并使用 CSS 更改 div 的顺序，但我敢打赌，情况并非如此。我认为，一旦您使用更大的屏幕，您将不得不使用一点绝对定位来使其正常工作。这是一个例子：和a fiddle

HTML

<div class="container">
    <div class="inner-w">

        <div class="block center">Center</div>  

        <div class="block left">Left</div>

        <div class="block right">Right</div>

    </div>
</div> <!-- .container -->

CSS

* {
    box-sizing: border-box;
}

.container {
    width: 100%;
    float: left;
    overflow: hidden; /* should be clearfix instead */
}

.container .inner-w {
    position: relative;
    max-width: 50em;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden; /* should be clearfix instead */
}

.block {
    width: 100%;
    float: left;
    min-height: 10em; /* just for show */
}

@media (min-width: 50em) {  

    .center {
        width: 50%;
        position: relative;
        left: 25%;
    }

    .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 25%;
    }

    .right {
        float: right;
        width: 25%;    
    }

} /* end break-point */

【讨论】：