我有一個這樣的佈局(簡體):位置格
<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的固定邊距)是不可選的。
我該如何解決這個問題?
謝謝!
你能創建一個你需要的模型嗎? –