CSS內嵌div使用媒體查詢做出響應

Question

我有這個CSS代碼：

.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;
    }
}

我用它來內聯顯示div並使用媒體查詢來使它們響應。

隨着屏幕變小，第3格顯示在其他下方，我該如何使其完全響應，以便它們同時顯示在下方。

我還希望所有3個元素均為width: 100%; 如果屏幕太寬，則它們顯示的左側多於中心。

更新的小提琴： http : //jsfiddle.net/a8k16vts/2/

我還要在行中顯示3個div，然后在這3個下顯示，在第一個下顯示一個div，然后在第二個下顯示一個更大的div。 像這樣： http : //jsfiddle.net/a8k16vts/3/

Answer 1

演示-http: //jsfiddle.net/a8k16vts/4/

使用display:inline-block而不是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

您希望它們在大屏幕中顯示在3列中嗎？ 如果是這樣，那么您的保證金就會下降到下面。

將邊距降低5像素。

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

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