两个div怎么根据浏览器宽度自动排列

Question

<div class="content-box shadow-large bg-white">                <div class="one-half">                     <h4 class="ultrabold bottom-10">1/1</h4>                     <img src="images/pictures/1s.jpg" class="shadow-large">                     <p>This is half a column.</p>                 </div>                 <div class="one-half last-column">                     <h4 class="ultrabold bottom-10">1/2</h4>                     <img src="images/pictures/2s.jpg" class="shadow-large">                     <p>This is half a column.</p>                 </div>                 </div>全宽的时候，这两个div并排了，我把浏览器宽度变小，他们还是跟着变小，浏览器宽度变得非常小的时候，第二个div，也不换行下去。怎么让他们自适应浏览器宽度。因为我要在手机上也可以方便看。以前用bootstrap很方便，这次老板不让用这个东西，说太大影响速度，必须手写，自己组织。晕死。相关的css是这样的。.one-half {    width: 45%;    float: left;    margin-right: 10%;} .last-column{margin-right: 0 !important}div{    display: block;    position: relative; }帮我看一下吧，又干后台，又干前台，命苦啊！

Answer 1

bootstrap原理换行下去是用了 CSS3 @media 查询。

.one-half {    width: 45%;    float: left;    margin-right: 10%;}.last-column{margin-right: 0 !important}div{    display: block;    position: relative;
}
@media screen and (max-width: 1200px) {   .one-half {        width: 90%;        float: none;        margin: 0 auto;
    }    .last-column{        margin: 0 auto !important;
    }
}

可以找一下相关的博客，自己写个测试html的了解下原理

Answer 2

弹性布局 + 媒体查询 能够轻松解决