我在響應式網站上工作,而且我在佈局上遇到了一些麻煩。我把問題分解到了儘可能少的線上。在響應式設計中使用浮動的問題定位元素
當窗口大於909px時,我想將第二個內容(content2)放在標題下方。當可用空間較少時,我希望它放在圖像下方。
目前它總是被放置在圖像下方。
Here的視覺效果。
我需要找到一個解決方案,而不使用絕對定位,因爲標題沒有固定的高度。事實上,我的html元素都沒有固定的高度,但我確實有固定的寬度。
我一直在試圖想出一個簡單的解決方案几個小時了。希望有人能指出我的方向:)
感謝您的閱讀!
HTML代碼:
<div class="wrapper">
<h1> some title </h1>
<div class="image"> some img</div>
<div class="content1"> some content </div>
<div class="content2"> some other content </div>
</div>
CSS樣式:
.content1{
float: left;
}
.image{
width: 600px;
}
.content2{
width: 300px;
float: right;
}
@screen and (min-width: 768px) and (max-width: 909px){
.wrapper {
width: 700px;
}
.content1 {
width: 300px;
}
}
@screen and (min-width: 909px){
.wrapper {
width: 900px;
}
.content1{
width: 600px;
}
}
這不是2005年停止使用花車爲您的佈局。 –
@AlexW - 使用浮動塊有什麼問題? – j08691
@ j08691他使用它來佈局塊元素,這可以很容易地使用內聯塊來完成,而不需要明確修正等。 –