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浮动属性并排

回答

相关问题