2017-08-13 13 views
0

私はHTMLとCSSを学習しており、floatプロパティに関してこのコードを作成しました。HTML Floatプロパティ横並び

はなぜ第四段落id="four"は、第三段落id="three"ではなく、左端に移動下に来るん -

\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>

は今、私の質問はこれですか?

+2

それらは "浮いて" と4番目の要素は左に浮遊するのに十分なスペースを持っているので... – Dekel

答えて

0

float: left;は、スペースを無駄にしないように空き領域をすべて使用します。あなたの例でこれを見ることができます。 3番目の列には空き領域があるため、4番目の列はそこに配置されます。

あなたはの代わりにvetical-align: top;display: inline-block;を探しているといいと思います。以下の例を参照してください。

\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>

0

指定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>

関連する問題