Html 在内容区域增长时向下推其他元素
我不明白，但我以前做过，现在不行了。我创建了一个基本的HTML和CSS文件，当客户端决定在内容区域中插入更多内容时，我有一个内容区域需要扩展，但它不起作用。内容区域与下面的其他元素重叠。有人能帮忙解释一下原因吗 HTML:Html 在内容区域增长时向下推其他元素,html,css,Html,Css,我不明白，但我以前做过，现在不行了。我创建了一个基本的HTML和CSS文件，当客户端决定在内容区域中插入更多内容时，我有一个内容区域需要扩展，但它不起作用。内容区域与下面的其他元素重叠。有人能帮忙解释一下原因吗 HTML: 如果你想知道，我经常使用边框作为参考。无论如何，我尝试在结束div标记后创建一个名为spacer的空div，并使用了id=“content”，然后使用clear:all，但它不起作用。为了避免出现类似问题，我建议使用CSS框架。基金会提供了一个我真正喜欢的12柱柔性网格。您可
如果你想知道，我经常使用边框作为参考。无论如何，我尝试在结束div标记后创建一个名为spacer的空div，并使用了
id=“content”clear:all<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Welcome to Boulineau's Website</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/foundation.css">
<link rel="stylesheet" href="stylesheets/app.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]-->
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- container -->
<div class="container">
<div class="row">
<div class="four columns"><!-- left nav -->
<a href="#"><img src="images/sidenav_03.png" alt="IGA" width="180" height="165" border="0" title="IGA Grocery Store" /></a>
<a href="#"><img src="images/sidelinks_05.png" alt="Ace" width="180" height="115" border="0" title="Ace Hardware" /></a>
<a href="#"><img src="images/sidelinks_06.png" alt="Eugene" width="180" height="100" border="0" title="Eugene Platt's Seafood" /></a>
<a href="#"><img src="images/sidelinks_07.png" alt="Barnacle" width="180" height="90" border="0" title="Barnacle Beach Shoppe" /></a>
<a href="#"><img src="images/sidelinks_08.png" alt="Hut" width="180" height="100" border="0" title="The Dairy Hut" /></a>
<a href="#"><img src="images/sidelinks_09.png" alt="Ocean" width="180" height="90" border="0" title="Ocean Treasures Resort Wear" /></a>
<a href="#"><img src="images/sidelinks_10.png" alt="Shell" width="180" height="85" border="0" title="Shell & Car Wash" /></a>
<a href="#"><img src="images/sidelinks_11.png" alt="Laundromat" width="180" height="85" border="0" title="Laundromat" /></a>
</div>
<div class="eight columns"> <!-- right area -->
<div>
<a href="#"><img src="images/weeklyspecials_03.png" alt="Weekly Specials" width="269" height="58" border="0" title="Click for Weekly Specials" /></a>
</div>
<div>
<img src="images/mainimage_03.png" alt="Main Image" width="648" height="319" border="0" />
</div>
<div class="row"> <!-- nav -->
<div class="one columns">
<a href="#"><img src="images/home.png" alt="Home Page" width="45" height="14" border="0" title="Home Page" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/aboutus.png" alt="About Us" width="65" height="14" border="0" title="About Us" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/cherrygrovebeach.png" alt="Cherry Grove Beach" width="120" height="14" border="0" title="Cherry Grove Beach" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/specialevents.png" alt="Special Events" width="92" height="14" border="0" title="Special Events" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/tidecharts.png" alt="Tide Charts" width="77" height="14" border="0" title="Tide Charts" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/employment.png" alt="Employment" width="82" height="14" border="0" title="Employment" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/printablecoupon.png" alt="Printable Coupons" width="98" height="14" border="0" title="Printable Coupons" /></a>
</div>
</div>
<div class="row"> <!-- content -->
<div class="twelve columns">
<P>
<img src="images/lobster.png" alt="" width="329" height="229" border="0" title="" />
Content Area needs to grow...anything below gets push down.
</P>
<div>
</div>
<div>
<img src="images/video_03.png" alt="Video" border="0" width="263" height="193" title="Video" />
</div>
<div>
<img src="images/weeklyad.jpg" alt="Weekly Ad" border="0" width="178" height="147" title="Weekly Ad" />
</div>
</div>
</div>
</div>
<!-- container -->
<!-- Included JS Files -->
<script src="javascripts/foundation.js"></script>
<script src="javascripts/app.js"></script>
</body>
</html>
欢迎访问Boulineau的网站
内容区域需要增长…下面的任何内容都会被向下推。
除了减少常见的CSS问题之外，还会出现很多问题。这个框架提供了一个简单的模型、一致性以及其他一些便利的东西，比如漂亮的内置按钮、标签、移动支持和检测。为了避免出现类似问题，我建议使用CSS框架。基金会提供了一个我真正喜欢的12柱柔性网格。您可以在以下网址找到： 如果要使用此框架重写HTML，它将如下所示：
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Welcome to Boulineau's Website</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/foundation.css">
<link rel="stylesheet" href="stylesheets/app.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]-->
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- container -->
<div class="container">
<div class="row">
<div class="four columns"><!-- left nav -->
<a href="#"><img src="images/sidenav_03.png" alt="IGA" width="180" height="165" border="0" title="IGA Grocery Store" /></a>
<a href="#"><img src="images/sidelinks_05.png" alt="Ace" width="180" height="115" border="0" title="Ace Hardware" /></a>
<a href="#"><img src="images/sidelinks_06.png" alt="Eugene" width="180" height="100" border="0" title="Eugene Platt's Seafood" /></a>
<a href="#"><img src="images/sidelinks_07.png" alt="Barnacle" width="180" height="90" border="0" title="Barnacle Beach Shoppe" /></a>
<a href="#"><img src="images/sidelinks_08.png" alt="Hut" width="180" height="100" border="0" title="The Dairy Hut" /></a>
<a href="#"><img src="images/sidelinks_09.png" alt="Ocean" width="180" height="90" border="0" title="Ocean Treasures Resort Wear" /></a>
<a href="#"><img src="images/sidelinks_10.png" alt="Shell" width="180" height="85" border="0" title="Shell & Car Wash" /></a>
<a href="#"><img src="images/sidelinks_11.png" alt="Laundromat" width="180" height="85" border="0" title="Laundromat" /></a>
</div>
<div class="eight columns"> <!-- right area -->
<div>
<a href="#"><img src="images/weeklyspecials_03.png" alt="Weekly Specials" width="269" height="58" border="0" title="Click for Weekly Specials" /></a>
</div>
<div>
<img src="images/mainimage_03.png" alt="Main Image" width="648" height="319" border="0" />
</div>
<div class="row"> <!-- nav -->
<div class="one columns">
<a href="#"><img src="images/home.png" alt="Home Page" width="45" height="14" border="0" title="Home Page" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/aboutus.png" alt="About Us" width="65" height="14" border="0" title="About Us" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/cherrygrovebeach.png" alt="Cherry Grove Beach" width="120" height="14" border="0" title="Cherry Grove Beach" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/specialevents.png" alt="Special Events" width="92" height="14" border="0" title="Special Events" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/tidecharts.png" alt="Tide Charts" width="77" height="14" border="0" title="Tide Charts" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/employment.png" alt="Employment" width="82" height="14" border="0" title="Employment" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/printablecoupon.png" alt="Printable Coupons" width="98" height="14" border="0" title="Printable Coupons" /></a>
</div>
</div>
<div class="row"> <!-- content -->
<div class="twelve columns">
<P>
<img src="images/lobster.png" alt="" width="329" height="229" border="0" title="" />
Content Area needs to grow...anything below gets push down.
</P>
<div>
</div>
<div>
<img src="images/video_03.png" alt="Video" border="0" width="263" height="193" title="Video" />
</div>
<div>
<img src="images/weeklyad.jpg" alt="Weekly Ad" border="0" width="178" height="147" title="Weekly Ad" />
</div>
</div>
</div>
</div>
<!-- container -->
<!-- Included JS Files -->
<script src="javascripts/foundation.js"></script>
<script src="javascripts/app.js"></script>
</body>
</html>
欢迎访问Boulineau的网站
内容区域需要增长…下面的任何内容都会被向下推。
除了减少常见的CSS问题之外，还会出现很多问题。这个框架提供了一个简单的模型、一致性以及其他一些便利的东西，比如漂亮的内置按钮、标签、移动支持和检测。我刚刚尝试了
clear:a中的两个，它将所有内容都放在了content div下面。另外，video
的结束div没有正确关闭。您缺少/
。我刚刚尝试了清除：在a中，两个都删除了内容分区下面的所有内容。此外，视频的结束分区未正确关闭。您缺少/
。
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Welcome to Boulineau's Website</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/foundation.css">
<link rel="stylesheet" href="stylesheets/app.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]-->
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- container -->
<div class="container">
<div class="row">
<div class="four columns"><!-- left nav -->
<a href="#"><img src="images/sidenav_03.png" alt="IGA" width="180" height="165" border="0" title="IGA Grocery Store" /></a>
<a href="#"><img src="images/sidelinks_05.png" alt="Ace" width="180" height="115" border="0" title="Ace Hardware" /></a>
<a href="#"><img src="images/sidelinks_06.png" alt="Eugene" width="180" height="100" border="0" title="Eugene Platt's Seafood" /></a>
<a href="#"><img src="images/sidelinks_07.png" alt="Barnacle" width="180" height="90" border="0" title="Barnacle Beach Shoppe" /></a>
<a href="#"><img src="images/sidelinks_08.png" alt="Hut" width="180" height="100" border="0" title="The Dairy Hut" /></a>
<a href="#"><img src="images/sidelinks_09.png" alt="Ocean" width="180" height="90" border="0" title="Ocean Treasures Resort Wear" /></a>
<a href="#"><img src="images/sidelinks_10.png" alt="Shell" width="180" height="85" border="0" title="Shell & Car Wash" /></a>
<a href="#"><img src="images/sidelinks_11.png" alt="Laundromat" width="180" height="85" border="0" title="Laundromat" /></a>
</div>
<div class="eight columns"> <!-- right area -->
<div>
<a href="#"><img src="images/weeklyspecials_03.png" alt="Weekly Specials" width="269" height="58" border="0" title="Click for Weekly Specials" /></a>
</div>
<div>
<img src="images/mainimage_03.png" alt="Main Image" width="648" height="319" border="0" />
</div>
<div class="row"> <!-- nav -->
<div class="one columns">
<a href="#"><img src="images/home.png" alt="Home Page" width="45" height="14" border="0" title="Home Page" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/aboutus.png" alt="About Us" width="65" height="14" border="0" title="About Us" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/cherrygrovebeach.png" alt="Cherry Grove Beach" width="120" height="14" border="0" title="Cherry Grove Beach" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/specialevents.png" alt="Special Events" width="92" height="14" border="0" title="Special Events" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/tidecharts.png" alt="Tide Charts" width="77" height="14" border="0" title="Tide Charts" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/employment.png" alt="Employment" width="82" height="14" border="0" title="Employment" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/printablecoupon.png" alt="Printable Coupons" width="98" height="14" border="0" title="Printable Coupons" /></a>
</div>
</div>
<div class="row"> <!-- content -->
<div class="twelve columns">
<P>
<img src="images/lobster.png" alt="" width="329" height="229" border="0" title="" />
Content Area needs to grow...anything below gets push down.
</P>
<div>
</div>
<div>
<img src="images/video_03.png" alt="Video" border="0" width="263" height="193" title="Video" />
</div>
<div>
<img src="images/weeklyad.jpg" alt="Weekly Ad" border="0" width="178" height="147" title="Weekly Ad" />
</div>
</div>
</div>
</div>
<!-- container -->
<!-- Included JS Files -->
<script src="javascripts/foundation.js"></script>
<script src="javascripts/app.js"></script>
</body>
</html>