gpt4 book ai didi

html css 包装器 div 不工作

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

我有以下网页布局..我不明白的是为什么内容 div 在右侧显示在其父包装 div 之外..

代码如下,感谢您的帮助..

@charset "utf-8"; /* CSS Document */

* { margin: 0; padding: 0; }

html, body { height: 100%; }

body { padding-top: 10px; background: url(../images/background.jpg) no-repeat center top;; }

div#wrapper { margin: auto; height: auto; width: 978px; min-width: 978px; min-height: 100%; margin: 0 auto -4em; }

div#header { height: 196px; }

#navigation { list-style: none; margin: 0; padding: 0; height: 69px; }

#navigation li { float: right; }

#navigation li a { display: block; width: 140px; text-align: center; color: red; font-size: 120%; height: 69px; }

#navigation li a:hover { background:url(../images/menu_red_bg.jpg);
color: yellow; }

div#content { width: 978px; background-color:#39F; margin-top: 80px;
overflow:auto; padding-bottom: 150px; padding-left: 50px; padding-right: 50px; }

div#footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear: both; padding: 5px; }

.leftCol { float: left; }

.rightCol { float: right; }

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title></title>   <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper">

<div id="header">Header</div> <div id="menu">
<ul id="navigation">
<li><a href="">Contact Us</a></li>
<li><a href="">Recommends</a></li>
<li><a href="">Todays Travel Deals</a></li>
<li><a href="">Home</a></li>
</ul> </div>

<div id="content">
<div class="leftCol">
<h2>Who we are...</h2>
<P>
Enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in in
vulputate velit esse molestie consequat.
Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim
placerat facer possim assum. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit.
</P>
</div>
<div class="rightCol">
<h2>Who we are...</h2>
<P>
Enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in in
vulputate velit esse molestie consequat.
Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim
placerat facer possim assum. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit.
</P>
</div>
<center><img src="images/dealoftheday.jpg" width="800" height="285" alt="Deal of the Day" /></center> </div> </div> <div id="footer"> <hr /> <img src="images/abta_logo.gif" width="171" height="74" alt="ABTA Logo" />
<img src="images/worldchoice.gif" width="254" height="83" alt="World Choice Logo" /> </div> </body> </html>

最佳答案

在两个 float 元素(.leftCol, .rightCol)之后的wrapper中再放一个div,并设置为清除:两者;

关于html css 包装器 div 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3331317/

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