Question

我正在学习HTML和CSS，并且我生成了有关float属性的代码。

＆＃13;

	

body {
    width: 750px;
    font-family: Arial, Verdana, sans-serif;
    color: #665544;
}

p {
    width: 230px;
    float: left;
    margin: 5px;
    padding: 5px;
    background-color: #efefef;
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<title>Using Float to Place Elements Side-by-Side</title>
	</head>
	<body>
		<h1>The Evolution of the Bicycle</h1>
		<p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
		<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>
		<p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
		<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>
		<p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel. 
		<p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
	</body>
</html>

＆＃13;

现在，我的问题是这个 -

为什么第四段id="four"位于第三段id="three"之下，而不是移到左边？

Answer 1

float: left;将使用每一点可用空间来确保不浪费空间。您可以在示例中看到这一点。第3列在下面有自由空间，所以第4列放在那里。

我认为您正在寻找display: inline-block; vetical-align: top;而不是float: left;以获得更好的结果。请参阅下面的示例。

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<title>Using Float to Place Elements Side-by-Side</title>
	</head>
	<body>
		<h1>The Evolution of the Bicycle</h1>
		<p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
		<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>
		<p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
		<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>
		<p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel. 
		<p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
	</body>
</html>

＆＃13;

Answer 2

这是因为您没有指定clear属性。来自MDN：

clear CSS属性指定元素是否可以位于其前面的浮动元素旁边，或者必须在它们下面向下移动（清除）。

＆＃13;

	

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;
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<title>Using Float to Place Elements Side-by-Side</title>
	</head>
	<body>
		<h1>The Evolution of the Bicycle</h1>
		<p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
		<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>
		<p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
		<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>
		<p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel. 
		<p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
	</body>
</html>

＆＃13;

HTML Float属性并排

2 个答案: