Div在響應式網頁設計中的重新定位

<html> 
<head> 

<style type="text/css"> 
.floatleft { 
    border: 1px solid blue; 
    float: left; 
} 
.floatright { 
    border: 1px solid red; 
    float: right; 
} 

@media screen and (max-width: 800px) { 
    #div1 { 
     float: none; 
    } 
} 
</style> 

</head> 
<body> 

<div id="div1" class="floatleft">Div 1</div> 
<div id="div2" class="floatleft">Div 2</div> 
<div id="div3" class="floatleft">Div 3</div> 
<div id="div4" class="floatright">Div 4</div> 

</body> 
</html>

我正在做我的第一個RWD項目，我正在努力瞭解如何重新調整div的重新定位。Div在響應式網頁設計中的重新定位

在我的代碼示例中，調整到800px div1將高於所有其他divs，這正是我想要的，但我發現困難的是如何將div4移動到div1的右側，根據我的圖片下面。

enter image description here

來源

2015-02-11 Daniel Williams

你應該將div 1，2和3包裝在一個向左浮動的父div中。然後你的div 4可以自己漂浮。相應地調整寬度。

<div id="parent" class="floatleft"> 
    <div id="div1">Div 1</div> 
    <div id="div2" class="floatleft">Div 2</div> 
    <div id="div3" class="floatleft">Div 3</div> 
</div> 
<div id="div4" class="floatright">Div 4</div>

See this fiddle

來源

2015-02-12 00:08:16

我居然通過移動上述DIV1 DIV4回答我自己的問題，但我發佈的代碼不正是我一直在想我的網頁來實現的，但是，你的建議正是我需要做的。哦，太簡單了！ – 2015-02-12 00:14:59

@DanielWilliams，你不應該讓你的最上面的div浮動。 – 2015-02-12 00:15:44

您可以設置兩個百分比寬度，DIV1有說80％的寬度和DIV4有說20％的寬度？雖然，div4將不得不在div1以下的HTML工作。

您現在沒有設置任何寬度嗎？

來源

2015-02-12 00:03:59

你有幾分的右腳上，你只需要致電DIV 2拉正確的類，並將它放在了第一位，在div一個將顯示默認其是塊，而另外兩個將顯示內聯以便彼此相鄰。

<div id="div4" class="floatright">Div 4</div> 
<div id="div1">Div 1</div> 
<div id="div2" style="display:inline;">Div 2</div> 
<div id="div3" style="display:inline;">Div 3</div> 


div{ 
    border: 1px solid blue; 
    display:inline; 
} 

.floatright { 
    border: 1px solid red; 
    float: right; 
}

看到提琴手

Demo fiddler

來源

2015-02-12 00:13:56 oqx

你不應該把你最上面的div浮動到右邊。這是不好的做法。默認情況下一切都是左對齊的。因此，您將拋出DOM的默認結構並寫入不必要的代碼。 – 2015-02-12 15:17:35

爲了映射他發佈的圖片，你需要做到這一點，這可能會嵌入另一個div，我試圖研究這種做法，但我找不到它可以分享鏈接，因爲我只知道bootstrap使用它在拉右班級。 – oqx 2015-02-12 15:59:33

Div在響應式網頁設計中的重新定位

回答

相關問題