个人中心
gpt4 book ai didi

html - float Div 的自动扩展父级

转载 作者：太空宇宙 更新时间：2023-11-04 13:25:26 25 4
gpt4 key购买 nike

我正在开发的一个网站由三个主要部分组成，一个标题、容器和一个页脚，它们都基于 DIV。主页容器设置为在右侧包含 2 个 Box。我使用 float div 制作了这些。如何让主容器自动调整大小？否则，我的 float div 只会覆盖页脚，这不是我想要的。页面在我尝试过的所有浏览器中都有效，IE8 除外...有人知道我该如何解决这个问题吗？不幸的是，由于 IE9 只是 Vista 以上版本，因此仍然会有很多用户在 XP 上使用 IE8。

不过我不太担心 CSS3 的不兼容性。 :)

链接:http://www.clientone.wwdev.info 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="css/default.css" rel="stylesheet" type="text/css">
<meta name="robots" content="all">
<meta name="author" content="surrealholidays.com">
<meta name="robots" content="index,follow">
<link rel="shortcut icon" href="http://www.surrealholidays.com/images/logo.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Welcome to Surreal Holidays</title>

<style type="text/css">
 img.c4 {border:0;width:88px;height:31px}
 h2.c3 {text-align: center}
 p.c2 {text-align: left}
 div.c1 {text-align: left}
a:link {
    color: #FFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFF;
}
a:hover {
    text-decoration: underline;
    color: #FFF;
}
a:active {
    text-decoration: none;
    color: #FFF;
}
</style>
</head>
<body class="oneColFixCtr">
<div class="oneColFixCtr" id="page">
<div id="banner"><img src="images/logos/banner.png" width="1000" height="80" alt="Main Banner"></div>
<div id="links">
<div id="linkblock">
<p class="c1"><br>
  <a href="/">Homepage</a> | Luxury Destinations | Private Tours | Terms &amp; Conditions |Enquire | News | Contact Us</p>
</div>
</div>
<div id="navig">
<div class="c2 c1" id="navi_direc">Homepage &gt;</div>
<div id="navi_newsl">Subscribe to see our latest offers: <label><input name="email" type="text" id="EmailAddress" value="Email Address" size="25"></label> <input type="submit" name="Submit" id="Submit" value="Go!"></div>
</div>
<div id="content"><img src="images/mainstory.jpg" width="1000" height="400" alt="Sample for Slideshow"><br>
<div id="hp_welcome">
<h2>Private Luxury Escorted Tours in Thailand - beyond your imagination</h2>
<p class="c2"><strong>At Surreal Holidays, you can really feel the passion for Thailand. From the first moment you contact our experienced team, you will be amazed by the in-depth local knowledge and deep love of the country and its people that you encounter. Not surprising! Some of us were born and raised in Thailand before moving to the UK. You will find we have a unique ability to understand how travellers from the UK can experience the best Thailand has to offer. No ordinary travel company, Surreal Holidays can tailor a holiday especially for you. Along the way, your experience will be enhanced by our high levels of customer service and thoughtful personal touches.</strong></p>
<p class="c2">&nbsp;</p>
<h2 class="c3"><strong>Bespoke Holidays to Thailand</strong></h2>
<p class="c2"></p>
<p class="c2"><strong>Our founder's inspiration: "..like you, when I travel, I use all my senses to enhance the experience. This often leads to a "surreal" feeling, as though the holiday is a dream like state where the strange and bizarre juxtaposition with the calm and beautiful. Nowhere epitomises this more than Thailand, my homeland. Whether you are looking for an inspirational island hopping itinerary or romantic wedding and honeymoon locations, soft adventure activities or cultural experiences, you need look no further. Thailand offers much more than just a place to relax on a beach. You can discover unique flora and fauna, stunning marine parks, and breathtaking scenery at every turn. Indeed, there really is something for everyone in our Amazing Thailand."... Runci Weeden</strong></p>
<p class="c2">&nbsp;</p>
<h2 class="c3"><strong>Unique Holidays to Thailand</strong></h2>
<p class="c2"></p>
<p class="c2"><strong>To find out more information on our Escorted Tour Holidays, including Nature Tours, Cultural Tours or Adventure Tours to Thailand, call 0845 003 5043 and speak to our friendly team.</strong></p>
<p class="c2">&nbsp;</p>
</div>
<div id="col2">
<div id="hp_ftcol2off">
<h2>Our Latest Offers</h2>
<table width="380" border="0">
<tr>
<td width="255">
  <p class="c2"><strong>Mai Samui<br>
    8 Days 7 Nights - From £1876 </strong></p>
  <p class="c2">Read more...</p></td>
<td width="125"><p><img src="images/MaiSamui/offers_hpthumb.jpg" width="125" height="81" alt="MaiSamui"></p></td>
</tr>
<tr>
<td>
  <p class="c2"><strong>Offer Two</strong></p>
  <p class="c2">Description</p>
  <p class="c2">Click Here for More Info</p>
</td>
<td><p>Image</p></td>
</tr>
<tr>
<td>
  <p class="c2"><strong>Offer Three</strong></p>
  <p class="c2">Description</p>
  <p class="c2">Click Here for More Info</p>
</td>
<td><p>Image</p></td>
</tr>
</table>
</div>
<div id="hp_ftcol2news">
<h2>Latest News</h2>
<p class="c2"><strong>Website Updates- 22 December 2011</strong></p>
<p class="c2">Following several major updates to our website, we would recommend that customers upgrade to Internet Explorer 9 or use an alternative browser such as Chrome or Safari to view this website properly.</p>
<p class="c2">&nbsp;</p>
<p class="c2">&nbsp;</p>
<p class="c2"><strong>Thailand Flooding Update - 29 November 2011</strong></p>
<p class="c2">Once again we would like to take this opportunity to advise you on the current conditions in sunny Bangkok and the surrounding areas...<br>
Read More...<br>
<br></p>
</div>
</div>
</div>
<div id="footer">
<div id="f_tr">
<br>
Tel: 0845 003 5043 (Local Rates from a BT Landline) , 01628 685 550 | Surreal Holidays Ltd, 31 Boyn Hill Road, Maidenhead, SL6 4HH<br>
<strong>&copy; Surreal Holidays Ltd. 2009-2012 All Rights Reserved.</strong> Surreal Holidays is the Trading Name of Surreal Holidays Ltd. Company Number: 06690344<br>
<div id="f_php">
  <div id="f_ph1"><img src="images/logos/logo-amazing.png" width="145" height="45" alt="Thailand"></div>
<div id="f_ph2">
  <p>Registered Office: 145-157 St John Street, London EC1V 4PW<br>
    Disclaimer | Privacy Policy | Copyright | Site Map</p>
</div>
<div id="f_ph3">
<img src="images/logos/logo-atol.png" width="45" height="45" alt="** PLEASE DESCRIBE THIS IMAGE **"><img src="images/logos/logo-atta.png" width="45" height="45" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
</div>
</div>
</div> <!-- Closing Tags For #Footer -->
</div> <!-- Closing Tags For #Page -->
</body>
</html>

这是我的 CSS:

@charset "utf-8";
/* CSS Document */
body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    background: #FFF4E1;
    margin: 0;
    padding: 10px;
    text-align: center;
    color: #333;
}

.oneColFixCtr#page {
    width:1000px;
    margin: 0 auto;
    height:auto;
}

#banner {
    width: 1000px;
    height: 100px;
}
#links {
    border-radius: 10px;
    background-color: #856043;
    color: #ffffff;
    height: 60px;
    width: 1000px;
    vertical-align: middle;
}

#linkblock {
    top: 115px;
    height: 60px;
    left: 11px;

}

#navig {
    height: 30px;
    width: 1000px;
}

#navi_direc{
    float:left;
    width: 548px;
    font-size: 12px;
}
#navi_newsl{
    float:left;
    width: 449px;
    font-size: 12px;
}

#content {
    height: auto;
    font-size: 12px;
    overflow:hidden;
}
#content h2 {
    font-size: 18px;
    color: #8a5e3c;
    font-weight: bold;
    line-height: 22px;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#content h3 {
    font-size: 14px;
    font-weight: normal;
    color: #8A5D3C;
    line-height: normal;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
}
#content h4 {
    font-size: 13px;
    font-weight: normal;
    line-height: normal;
    color: #8A5D3C;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
}
#content h5 {
margin: 0px;
font-size: 12px;
font-weight: normal;
line-height: normal;
color: #8A5D3C;
padding: 0px;
}
#content p {
    line-height: normal;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: 5px;
    font-size: 12px;
}

#page #links #linkblock p {
    font-size: 14px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#page #navig #navi_newsl div {
    font-size: 12px;

}
#page #links #linkblock p {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#footer {
    background-color: #8A5D3C;
    height: auto;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}#page #footer p {
    color: #FFF;
}
#page #footer p {
    font-size: 12px;
}
#hp_welcome{
    width: 600px;
    float:left;
    margin-top: 0px;
}
#hp_ftcol2off {
    width:380px;
    float:right;
    margin: 10px 0 0 10px;
    background-color:#C1A790;
    border-radius: 10px;
}
#hp_ftcol2news {
    width:380px;
    float:right;
    margin: 10px 0 10px 10px;
    background-color:#C1A790;
    border-radius: 10px;
}
#page #content #hp_ftcol2off table tr td {
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}
#container_hp{
    width: 1000px;
    height: auto;
    overflow:auto;
}
#f_tr{
    height:auto;
}
#f_php{
    width: 1000px;
    height: 60px;
}
#f_ph1{
    width:330px;
    float:left;
}
#f_ph2{
    width:340px;
    float:left;
    }
#f_ph3{
    width:330px;
    float:left;
}
.oneColFixCtr #page #footer #f_tr {
    font-size: 12px;
}
.oneColFixCtr #page #footer #f_tr {
    color: #FFF;
}
#col2 {
    width:400px;
    float: right;
    border-bottom: 10px;
}

最佳答案

关于html - float Div 的自动扩展父级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8681556/

25 4 0
文章推荐： c++ - 链接列表释放内存 - 段错误
文章推荐： html - 如何适配屏幕
文章推荐： Java Batch(JSR-352) 和 session 上下文 CDI
文章推荐： jquery - 我们可以在媒体查询中使用从 JQuery 中提取的图像高度吗？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com