Question

我在一个包装器中并排有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在浏览器窗口变小时重新排序。我希望他们像这样从上到下出现：

LEFT
RIGHT
CENTER

甚至更好

CENTER
LEFT
RIGHT

有什么想法吗？

Answer 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>

Answer 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 */

根据宽度更改divs顺序

2 个答案:

HTML

CSS