gpt4 book ai didi

html - 填充 0 和边框 0 的 div 之间的间隙

转载 作者:行者123 更新时间:2023-11-28 03:06:49 25 4
gpt4 key购买 nike

我有以下从网上获得的布局,我发现 div 不会相互接触。因为在较低的 div 的顶部不会触及它上面的 div 的底部。当边框打开时它会触及,但当边框被移除时背景会显示出来。标题不触及导航,边框消失了......?这是代码:

<html>
<head>
<title>A two column layout from the internet</title>
<link rel="stylesheet" href="styles2.css"/>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Document heading</h1></div>
<div id ="nav">
<ul>
<li><a href="#">option 1</a></li>
<li><a href="#">option 2</a></li>
<li><a href="#">option 3 </a></li>
<li><a href="#">option 4 </a></li>
<li><a href="#">option 5 </a></li>
</ul>
</div><!--navigation -->
<div id ="main">
<h2>column 1 #Main float:left; </h2>
<p> This is column one so we can imagine the text ,pictures etc in here </P>
<p>Note the sum of the widths must add up to the width of the wrapper
Note:adding a border to the main div moves the `enter code here`sidebar div down..
so an increase of the wrapper by 2px fixes this so we may conclude that
the size of a div exludes borders.
</p>
</div><!-- main-->
<div id="sidebar">
<h2>column 2 #sidebar float:right</h2>
<p> here stuff for column two... .....</p>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3 </a></li>
</ul>
</div>
<div id="footer">
<p>footer</p>
<p> Note without the clear both property added to the footer it does not sit below the content but underneath the
the floated content. floating an element takes it out of the document flow.. prior to the floats the footer does as expected sit
below the sidebars.. left and right..
</p>
</div>
<div><!-- end wrapper often used to centre the site-->
</body>
</html>

最佳答案

float 属性应该可以修复它。只需将 div 向左(或任何地方) float 即可。

#header {
float:left;
}
#nav {
float:left;
}

关于html - 填充 0 和边框 0 的 div 之间的间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32314923/

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