當我嘗試浮動項目時，我的div正在堆疊在彼此的頂部

我是一個CSS超級noobie，並且已經制作了一些用於在頁面上練習定位項目的框。可悲的是，我已經遇到了一個問題！我想把方框1和方框2放在一條線上，方框3和方框4放在下一條線上。我正在嘗試使用float: left使方框2進入方框1，但事情只是重疊。當我嘗試浮動項目時，我的div正在堆疊在彼此的頂部

**如果可以的話，會發布圖片。

<!DOCTYPE HTML> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="boxprac.css"> 
    <title>Box Practice</title> 
    </head> 
    <body> 
    <div id="box1"> 
     <h1>Box One</h1> 
    </div> 
    <div id="box2"> 
     <h1>Box Two</h1> 
    </div> 
    <div id="box3"> 
     <h1>Box Three</h1> 
    </div> 
    <div id="box4"> 
     <h1>Box Four</h1> 
    </div> 
    </body> 
</html>

風格

* { 
    padding: 0; 
    margin: 0; 
} 

#box1 { 
    border: 1px solid black; 
    text-align: center; 
    height: 200px; 
    width: 400px; 
    margin: 1em; 
    line-height: 200px; 
    clear: left; 
} 

#box2 { 
    border: 1px solid black; 
    text-align: center; 
    height: 200px; 
    width: 400px; 
    margin: 1em; 
    line-height: 200px; 
    float: left; 
} 

#box3 { 
    border: 1px solid black; 
    text-align: center; 
    height: 200px; 
    width: 400px; 
    margin: 1em; 
    line-height: 200px; 
} 

#box4 { 
    border: 1px solid black; 
    text-align: center; 
    height: 200px; 
    width: 400px; 
    margin: 1em; 
    line-height: 200px; 
}

我可以管理排隊盒2，3和4上與浮子left屬性的第二行;但是，如果它不在全部三個盒子上，那麼它們會堆疊在一起。

來源

2017-03-05 cinnstix

把float: left在所有四個箱子，並添加clear: left到第三個：

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#box1 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 1em; 
 
    line-height: 200px; 
 
    float: left; 
 
} 
 

 
#box2 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 1em; 
 
    line-height: 200px; 
 
    float: left; 
 
} 
 

 
#box3 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 1em; 
 
    line-height: 200px; 
 
    clear: left; 
 
    float: left; 
 
} 
 

 
#box4 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 1em; 
 
    line-height: 200px; 
 
    float: left; 
 
}

<div id="box1"> 
 
     <h1>Box One</h1> 
 
    </div> 
 
    <div id="box2"> 
 
     <h1>Box Two</h1> 
 
    </div> 
 
    <div id="box3"> 
 
     <h1>Box Three</h1> 
 
    </div> 
 
    <div id="box4"> 
 
     <h1>Box Four</h1> 
 
    </div>

來源

2017-03-05 01:47:04 Johannes

好吧，我試過了。方框1現在與方框2對齊;不過現在方框3本身就在一條線上，方框4的文本在它下面的線上，方框4的實際邊框在方框1的頂部堆疊。http://i.imgur.com/nYSqodD .jpg – cinnstix

然後你做了一些不同的事情，但我看不到你做了什麼，所以我看不到錯誤......聽起來好像你忘了關閉一個HTML標記的地方，但我真的不知道沒有看到它。（我的意思是代碼） – Johannes

實際上從你的圖像我猜你沒有把'float：left'放在第四個框中（也檢查每行結尾處的分號等語法錯誤等） – Johannes

這基本上是後面解決這個想法。最好的辦法是wrap各組的箱子在div

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.boxes { 
 
    width: auto; 
 
    height: 100px; 
 
    } 
 
#box1 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 1em; 
 
    font-size: 12px; 
 
    line-height: 50px; 
 
    float: left; 
 
} 
 

 
#box2 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 50px; 
 
    width: 50px; 
 
    font-size: 12px; 
 
    margin: 1em; 
 
    line-height: 50px; 
 
    float: left; 
 
} 
 

 
#box3 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 50px; 
 
    width: 50px; 
 
    font-size: 12px; 
 
    margin: 1em; 
 
    line-height: 50px; 
 
    float: left; 
 
} 
 

 
#box4 { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    height: 50px; 
 
    font-size: 12px; 
 
    width: 50px; 
 
    margin: 1em; 
 
    line-height: 50px; 
 
    float:left; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="boxprac.css"> 
 
    <title>Box Practice</title> 
 
    </head> 
 
    <body> 
 
    <div class="boxes"> 
 
    <div id="box1"> 
 
     <p>Box One</p> 
 
    </div> 
 
    <div id="box2"> 
 
     <p>Box Two</p> 
 
    </div> 
 
    </div> 
 
    <div class="boxes"> 
 
    <div id="box3"> 
 
     <p>Box Three</p> 
 
    </div> 
 
    <div id="box4"> 
 
     <p>Box Four</p> 
 
    </div> 
 
    </div> 
 
    </body> 
 
</html>

來源

2017-03-05 01:48:17

當我嘗試浮動項目時，我的div正在堆疊在彼此的頂部

回答

相關問題