展会信息港展会大全

解决CSS float 父层定义的颜色无法显示方法
来源:互联网   发布日期:2016-03-25 16:14:19   浏览:1720次  

导读:本文章来介绍一下关于解决CSS float 父层定义的颜色无法显示方法 ,有需要了解的同学可以参考一下关于css float的用法。代码如下复制代码 <!DOCTY...

本文章来介绍一下关于解决CSS float 父层定义的颜色无法显示方法 ,有需要了解的同学可以参考一下关于css float的用法。

代码如下

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Fixed Width Layout - Outer container collapsed</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">

body

{

margin:0;

padding:0;

text-align:center;

background:#f0f0f0 url("body-bg.gif") repeat-x top;

}

#wrapper{

text-align:left;

width:770px;

margin:10px auto;

background:#dade75;

border:1px solid silver;

}

#header{

padding:10px 15px 10px 13px;

background:#272727 url(header-bg.gif) repeat-x bottom left;

}

#content-wrapper{

width:570px;

float:right;

background:#fff url(nav-to-content-trans.gif) repeat-y left;

}

#content-inner{

padding:10px 5px 5px 10px;

}

#navigation{

float:left;

width:200px;

padding-top:15px;

}

</style></head><body><div id="wrapper"><div id="header"><img src="swanky-header-graphic.gif" alt="Swanky header graphic" width="377" height="41" /></div><div id="content-wrapper">

<div id="content-inner">

<p>We flew with Czech Airlines and weren't expecting a swish ride; we also weren't expecting to be fed on such a short flight on economy tickets, so we gorged on overpriced breakfast in Stansted airport and didn't know what to do when the flight attendants appeared with trays of pre-packaged food. As usual, greedy guts (me) polished off the sweet items that Manda couldn't quite face so early in the day. </p>

<p>After a smooth flight, we landed under an ominous-looking sky. It was looking dark and moody in the distance, as if to prove that the five days of thunderstorms forecast for Prague were soon to start. Strangely, though, despite the grey skies in the distance it was hot and sunny as we stepped off the plane to the transfer bus. We might just get lucky with the weather, I thought. </p>

<p>Once we got through the usual arrival procedures of claiming baggage, immigration checks etc, we made our way out to where all the transfer buses were waiting for tired travellers. We immediately headed to the right, following a tip from one of Manda's colleagues that there were cheap transfer buses there - a 90 crown fare (approx2.50) to drop in the centre as opposed to the 490 crown charge for a transfer right to the hotel front door. Luckily, the drop-off point, just around the corner from the Municipal Building, turned out to be an 8-minute walk from our hotel. </p>

</div></div><div id="navigation">

<ul>

<li><a href="day1.html">Day 1 (arrival)</a></li>

<li><a href="day2.html">Day 2 (kutna Hora)</a></li>

<li><a href="day3.html">Day 3 (Prague Castle)</a></li>

<li><a href="day4.html">Day 4 (up the towers, Karlstejn Castle)</a></li>

<li><a href="day5.html">Day 5 (Metro tour)</a></li>

</ul></div></div></body></html>

在wrapper上定义的颜色dade75不见了。

看书中后面的解释,原来这个也是需要清除浮动

代码如下

复制代码

#wrapper:after{

content:"";

display:block;

height:0;

clear:both;}

页面呈现的效果如图:

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港