HTML浮動屬性並排

我正在學習HTML和CSS，並且我生成了有關float屬性的此代碼。HTML浮動屬性並排

\t 
 

 
body { 
 
    width: 750px; 
 
    font-family: Arial, Verdana, sans-serif; 
 
    color: #665544; 
 
} 
 

 
p { 
 
    width: 230px; 
 
    float: left; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    background-color: #efefef; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Using Float to Place Elements Side-by-Side</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <h1>The Evolution of the Bicycle</h1> 
 
\t \t <p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p> 
 
\t \t <p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p> 
 
\t \t <p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p> 
 
\t \t <p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p> 
 
\t \t <p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel. 
 
\t \t <p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p> 
 
\t </body> 
 
</html>

現在，我的問題是這樣的 -

爲什麼第四段id="four"下第三段id="three"而不是移動到左側邊緣來了嗎？

來源

2017-08-13 Dave Smith

因爲他們是「浮動」和第4單元有足夠的空間，以左浮動... – Dekel

float: left;將使用可用空間的每一位來確保沒有空間被浪費。你可以在你的例子中看到這個。第三列有下面的空閒空間，所以第四列放置在那裏。

我認爲你正在尋找display: inline-block;與vetical-align: top;而不是float: left;爲好的結果。看下面的例子。

\t \t \t body { 
 
\t \t \t \t width: 750px; 
 
\t \t \t \t font-family: Arial, Verdana, sans-serif; 
 
\t \t \t \t color: #665544; 
 
\t \t \t } 
 
\t \t \t p { 
 
\t \t \t \t width: 230px; 
 
\t \t \t \t margin: 5px; 
 
\t \t \t \t padding: 5px; 
 
\t \t \t \t background-color: #efefef; 
 
\t \t \t \t display: inline-block; 
 
\t \t \t \t vertical-align: top; 
 
\t \t \t }

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Using Float to Place Elements Side-by-Side</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <h1>The Evolution of the Bicycle</h1> 
 
\t \t <p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p> 
 
\t \t <p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p> 
 
\t \t <p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p> 
 
\t \t <p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p> 
 
\t \t <p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel. 
 
\t \t <p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p> 
 
\t </body> 
 
</html>

來源

2017-08-13 22:20:03 Ruud

那是因爲你沒有指定clear屬性。來自MDN：

清除CSS屬性指定一個元素是否可以在它之前的浮動元素旁邊，或者必須在它們下面向下移動（清除）。

\t 
 

 
body { 
 
    width: 750px; 
 
    font-family: Arial, Verdana, sans-serif; 
 
    color: #665544; 
 
} 
 

 
p { 
 
    width: 230px; 
 
    float: left; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    background-color: #efefef; 
 
} 
 

 
#four { 
 
    clear: left; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Using Float to Place Elements Side-by-Side</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <h1>The Evolution of the Bicycle</h1> 
 
\t \t <p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p> 
 
\t \t <p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p> 
 
\t \t <p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p> 
 
\t \t <p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p> 
 
\t \t <p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel. 
 
\t \t <p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p> 
 
\t </body> 
 
</html>

來源

2017-08-13 22:42:40 Kevin

HTML浮動屬性並排

回答

相關問題