CSS内嵌div使用媒体查询做出响应

Question

I have this CSS code:

.wrap div {
    border: 1px solid #f36f25;
    width: 30%;
    float: left;
    margin:10px;
    padding:5px;
}
.clear:after {
   content: "";
   display: table;
   clear: both;
}
@media all and (max-width: 800px) {
    div.wrap div {
        width: 100%;
        float: none;
    }
}

which I'm using to display divs inline and using media queries, to make them responsive.

As the screen gets smaller, the 3rd div displays underneath the others, how can I make it fully responsive so that they all display underneath each other at the same time.

I would also like all 3 to be width: 100%; if the screen is too wide they display more of the left side than the centre.

Updated fiddle: http://jsfiddle.net/a8k16vts/2/

I would also like to display 3 divs inline, then under those 3, one div under the first and then a larger div to fit under the second two divs. Like so: http://jsfiddle.net/a8k16vts/3/

Answer 1

demo - http://jsfiddle.net/a8k16vts/4/

use display:inline-block instead of float

 * { margin: 0; padding: 0; box-sizing: border-box; } .wrap { text-align: center; } div.wrap div { border: 1px solid #f36f25; width: 29%; display: inline-block; margin: 0 5px 0 5px; padding: 10px; text-align: left; } @media all and (max-width: 800px) { div.wrap div { width: 100%; float: none; margin: 0px; } } 

 <div class="wrap"> <div>testing 1</div> <div>testing 2</div> <div>testing 3</div> </div> 

Answer 2

You want them to be in 3 columns when its in large screen? if so, then your margin is causing it to drop underneath.

drop down the margin by 5px.

.wrap div {
    border: 1px solid #f36f25;
    width: 30%;
    float: left;
    margin:5px;
    padding:5px;
}

http://jsfiddle.net/a8k16vts/1/