位置格

Question

我有一個這樣的佈局（簡體）：

<div class="row row-1"> 
    <div class="block">block title 1</div> 
    <div class="content">Content of the 1st block</div> 
</div> 
<div class="row row-2"> 
    <div class="block">Block title 2</div> 
</div> 
<div class="row row-3"> 
    <div class="block">Block title 3</div> 
</div> 
<div class="row row-4"> 
    <div class="block">Block title 4</div> 
</div> 

我的CSS（響應式設計）顯示

.row { 
    width: 49%; 
    float: left; 
    display: block; 
    border: 1px solid black; 
} 
@media screen and (min-width: 768px) { 
    .row { 
    width: 32%; 
    } 
} 

前面兩塊相鄰小屏幕，3個塊顯示在1行中用於放大屏幕。 row-1 div的content div必須顯示在第一行塊的下方。下一個塊位於所有這一點之下。

我試圖在content div上使用position:absolute;，但它位於頁面流之外。內容與下一個塊重疊。內容將是可變的，所以固定的高度（以及下一個div的固定邊距）是不可選的。

我該如何解決這個問題？

謝謝！

Answer 1

float:left是什麼殺了這個。通常，作爲一個經驗法則，您應該只使用CSS float作爲最後的手段，因爲它經常引入與其他浮動元素之間不需要的交互。

Set display: inline-block and vertical-align: top。這將導致塊保持其塊形狀，但像文本一樣流動。

例如JSFiddle。

.row { 
    width: 49%; 
    display: inline-block; 
    border: 1px solid black; 
    vertical-align: top; 
} 
@media screen and (min-width: 768px) { 
    .row { 
    width: 32%; 
    } 
} 

Answer 2

雖然瑞安穆勒是現貨，你也可以使用flexbox。

FIDDLE

我包裹在一個<section class="flex">

Relavent CSS一切

.flex { 
     display: flex; 
    } 

    @media screen and (max-width: 768px) { 
    .flex { 
     display: flex; 
     flex-flow: column wrap; 
    } 
    } 

注：我改變了你的媒體查詢從min-width: 768px到max-width: 768px對你的意圖是要適應假設移動設備。