如何在使用float和div時定位固定？

我使用：如何在使用float和div時定位固定？

<div class="class1">Image</div> 
<div class="class2">Image</div> 
<div class="class3">Image</div> 
<div class="class4">Image</div>

我使用圖像作爲背景，應該都在同一行（所有圖片）。我使用的是float:left，其中兩張圖像是float:right。但是我的問題在瀏覽器調整大小時開始。所有的圖像將以不同的線條混亂。

任何幫助appreaciated。

來源

2012-09-21 harikrishnan.n0077

Plz幫助我們。張貼更多的代碼。什麼是html？你的CSS是什麼？ – HerrSerker

你的問題還不清楚。

如果您想要所有四個div（以及爲什麼使用div而不是<？）保持連續，並且如果瀏覽器窗口太小，則不會覆蓋在下面的行上，那麼您可以嘗試（假設200像素的圖像寬度 - 使用樣式，而不是一類的簡單 - 這是不適合部署！）：

<div style="width:800px"> 
    <div class="class1">Image</div> 
    <div class="class2">Image</div> 
    <div class="class3">Image</div> 
    <div class="class4">Image</div> 
</div>

這將迫使div容器足夠寬以包含所有四個圖像連續。但是，如果瀏覽器的寬度不足以顯示它們，您將得到一個水平滾動條（從用戶體驗的角度來看，這不是很好）

或者，使用您當前的HTML，並將所有他們離開了。如果瀏覽器窗口調整大小，那麼最後一張圖片將放到下一行，並且div應保持相同順序

來源

2012-09-21 11:55:03

如果您將最小寬度定義爲父DIV，則更好。

例如這樣寫：

.parent{ 
    overflow:hidden; 
    min-width:800px; 
} 
.parent > div{ 
    width:200px; 
    height:100px; 
    background:red; 
} 
.class1,.class2{float:left} 
.class3,.class4{float:right}

入住這http://jsfiddle.net/nRhed/

來源

2012-09-21 11:54:56 sandeep

您的問題尚不清楚。據我瞭解。檢查這些屬性max-width,min-width,max-height和min-height。這些屬性對於網頁設計師來說永遠是朋友，因爲這些將會保持網頁佈局穩定。 click here to learn more about them.。如果我們給你答案，你就不會理解它們使用的深層概念。嘗試給出最大值和最小值的近似值。

來源

2012-09-21 11:59:12

如何在使用float和div時定位固定？

回答

相關問題