我可以使用列稍微接近它,但行不對齊,並且它們以對角方式摺疊。所以我想我只是重新開始,並要求提供任何幫助來製作這個響應版本。當屏幕縮小時,每個單元應該堆疊在一起。使用引導程序創建此佈局
這裏就是我試圖創建:
這是我的起點。
HTML:
<div class="unit">
<div id="blue" class="square"></div>
<div class="text">Blue text Lorem Ipsum Blue text Lorem Ipsum Blue text Lorem Ipsum Blue text Lorem Ipsum Blue text Lorem Ipsum Blue text Lorem Ipsum
</div>
</div>
<div class="unit">
<div id="red" class="square"></div>
<div class="text">
Red Text Lorem Ipsum Red Text Lorem Ipsum Red Text Lorem Ipsum Red Text Lorem Ipsum Red Text Lorem Ipsum Red Text Lorem Ipsum
</div>
</div>
<div class="unit">
<div id="yellow" class="square"></div>
<div class="text">
Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum </div>
</div>
<div class="unit">
<div id="green" class="square"></div>
<div class="text">Green Text Lorem Ipsum Green Text Lorem Ipsum Green Text Lorem Ipsum Green Text Lorem Ipsum Green Text Lorem Ipsum Green Text Lorem Ipsum Green Text Lorem Ipsum</div>
</div>
CSS(沒有佈局)
.square{
height: 50px;
width: 50px;
}
#blue{
background-color: blue;
}
#red{
background-color: red;
}
#yellow{
background-color: yellow;
}
#green{
background-color: green;
}
它是沒關係的HTML做到這一點在表中。這是獲得你想要實現的一個好方法。 –
用於佈局的HTML表格不是一個好主意。它在90年代被嘗試過 - 儘可能避免這樣做,因爲現在有很多(更好)的方法來實現這一點。 – ochi