gpt4 book ai didi

css - 当它包含 float 元素时,在 css 中包含元素的边框

转载 作者:行者123 更新时间:2023-11-28 13:28:27 24 4
gpt4 key购买 nike

在这个 2 列布局中,我想在整个页面上放置一个边框。我想如果我把'border:solid'放在<body>里面标签可以完成这项工作,但事实并非如此。它只在标题 <h1> 上加了一个边框.有人可以帮忙吗?谢谢!

http://jsfiddle.net/v5gSt/

<!DOCTYPE html>
<html>
<head>
<title>Two Column Layout</title>
<style type="text/css">
body {
width: 960px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
border: solid;
}
.column1of2 {
float: left;
width: 620px;
margin: 10px;}
.column2of2 {
float: left;
width: 300px;
margin: 10px;}
</style>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<div class="column1of2">
<h3>The First Bicycle</h3>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<h3>Further Innovations</h3>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since it's wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</div>
<div class="column2of2">
<h3>Bicycle Timeline</h3>
<ul>
<li>1817: Draisienne</li>
<li>1865: Velocipede</li>
<li>1870: High-wheel bicycle</li>
<li>1876: High-wheel safety</li>
<li>1885: Hard-tired safety</li>
<li>1888: Pneumatic safety</li>
</ul>
</div>

</body>
</html>

最佳答案

虽然不是语义化的,但在结束 body 标签前添加一个空的 div 样式 clear:both 修复了它。

jsFiddle example

关于css - 当它包含 float 元素时,在 css 中包含元素的边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12763723/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com