流暢，響應式布局和浮動元素的問題

Question

我正在設計一個基本的，雙柱流體響應布局，可以為移動設備進行線性化 - 如附圖中所示 - 使用浮動元素; 我遇到了某些元素掉落的問題， 我可以在這里設置的小提琴中查看 。 出於某種原因，“塊7”與“塊6”的頂部對齊，而不是根據需要在“塊3”下面流動。

關於這種布局，我有兩個問題：（1）如何讓塊按預期對齊; （2）是否有可能，比如使用jQuery，重新安排移動塊的順序 - 例如，在某個斷點處 - 我在小提琴中使用678px--我可以說，“塊6“出現在”塊3“下？

對於第一個問題，我一直在閱讀有關使用inline-block而不是float文章和其他線程，盡管我寧願不必處理似乎發生的空白問題。 但是，如果這是唯一可行的路線，那么它能否以最小化這些怪癖的方式實施？ （我總是使用花車進行布局......）

非常感謝您的反饋。

Answer 1

請看一下這個，我已經修改了一下你的CSS：

 /*-------------------- clearfix --------------------- */ .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } /*-------------------- main --------------------- */ .container { max-width: 960px; padding: 2%; } .block { font-family: sans-serif; color: #fff; background-color: #7f7f7f; font-weight: bold; text-align: center; margin-bottom: 20px; } .one { float: left; width: 30%; height: 150px; margin-right: 2%; } .two { float: right; width: 67%; height: 250px; } .three { float: left; clear: left; width: 30%; height: 150px; margin-right: 2%; } .four { float: right; width: 67%; height: 250px; } .seven { float: right; width: 67%; height: 250px; } .six { float: right; width: 67%; height: 200px; } .five { float: left; clear: left; width: 30%; height: 450px; margin-right: 2%; } .eight { float: left; width: 30%; height: 200px; margin-right: 2%; } /* 678 breakpoint ----------- */ @media only screen and (max-width: 678px) { .block { width: 100% !important; float: none !important; } } 

 <div class="container cf"> <div class="block one">1</div> <div class="block two">2</div> <div class="block three">3</div> <div class="block four">4</div> <div class="block five">5</div> <div class="block six">6</div> <div class="block seven">7</div> <div class="block eight">8</div> </div> 

首先，在你的原始小提琴中，必須分配給.five div的樣式，即float: left; width: 30%; height: 150px; margin-right: 2%; float: left; width: 30%; height: 150px; margin-right: 2%; ，分配給.seven div和必須分配給.seven div的樣式，即float: right; width: 67%; height: 250px; float: right; width: 67%; height: 250px; ，被分配到.five div。 而且，我補充說clear: left; 到.five div並增加它的高度。

其次，盡量改變盒而言在一定斷點的順序，你只能通過增加的另一個DIV實現，使用CSS .six之后.three格，並將它們隱藏在桌面上，並將其顯示只在破發點，這是一個示例（在整頁中查看代碼片段，然后調整瀏覽器大小）：

 /*-------------------- clearfix --------------------- */ .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } /*-------------------- main --------------------- */ .container { max-width: 960px; padding: 2%; } .block { font-family: sans-serif; color: #fff; background-color: #7f7f7f; font-weight: bold; text-align: center; margin-bottom: 20px; } .one { float: left; width: 30%; height: 150px; margin-right: 2%; } .two { float: right; width: 67%; height: 250px; } .three { float: left; clear: left; width: 30%; height: 150px; margin-right: 2%; } .four { float: right; width: 67%; height: 250px; } .seven { float: right; width: 67%; height: 250px; } .six { float: right; width: 67%; height: 200px; } .five { float: left; clear: left; width: 30%; height: 450px; margin-right: 2%; } .eight { float: left; width: 30%; height: 200px; margin-right: 2%; } .show { display: none; } /* 678 breakpoint ----------- */ @media only screen and (max-width: 678px) { .block { width: 100% !important; float: none !important; } .hide { display: none; } .show { display: block; } } 

 <div class="container cf"> <div class="block one">1</div> <div class="block two">2</div> <div class="block three">3</div> <div class="block six show">6</div> <div class="block four">4</div> <div class="block five">5</div> <div class="block six hide">6</div> <div class="block seven">7</div> <div class="block eight">8</div> </div> 

如您所見，上面的HTML結構中有兩個.six div實例。 首先是<div class="block six show">6</div> ，它位於.three div之后，另一個是<div class="block six hide">6</div>在.seven div之前。 對於桌面視圖，我隱藏的第一個實例.six通過設置DIV display: none上.show和媒體查詢里，我隱藏的第二個實例.six通過設置DIV display: none上.hude和展示通過在.hide上設置display: block來設置.six div的第一個實例。

Answer 2

你可以這樣做，但是你必須要小心，你的右邊的盒子不要超過左邊的高度，否則它不會折疊，你可能還有其他的對齊問題。 將您的內容放在小視口順序或編號順序中。

我建議，如果你只想用css的方式做這個，使用flexbox。 它在舊版瀏覽器中並不完全支持，但如果使用modernizr，則可以使用后備版。 谷歌“flexbox css”沒有引號，還有很多教程。

編輯：我只是注意到7不是奇怪的順序。 我現在就離開這個，但明天可能會刪除它。

演示： http ： //jsfiddle.net/aut5haxv/1/

CSS

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both
}
.container {
    max-width: 960px;
    padding: 2%;
    box-sizing:border-box;
    border:1px solid blue;
}
.container .column:nth-child(odd) {
    width: 30%;
    float: left;
}
.container .column:nth-child(even) {
    width: 68%;
    float: right;
}
.column {
    font-family: sans-serif;
    color: red;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid red;
    margin-bottom:2%;
}
.one {
    height: 150px
}
.two {
    height: 250px
}
.three {
    height: 250px;
    clear:left;
}
.four {
    height: 450px
}
.five {
    height: 450px;
}
.six {
    height: 350px
}
.seven {
    height: 250px
}
.eight {
    height: 200px;
}
@media only screen and (max-width:678px) { 
    .container .column:nth-child(odd),
    .container .column:nth-child(even) {
        width: 100%;
        float: none;
    }
}

HTML：

<div class="container clearfix">
   <div class="column one">1</div>
   <div class="column two">2</div>
   <div class="column three">3</div>
   <div class="column four">4</div>
   <div class="column five">5</div>  
   <div class="column six">6</div> 
   <div class="column seven">7</div>
   <div class="column eight">8</div>
</div>