html - 在 Content Area 增长的同时下推其他元素-6ren

html - 在 Content Area 增长的同时下推其他元素

转载作者：行者123 更新时间：2023-11-28 18:53:16

我不明白，但我以前做过，现在不行了。我创建了一个基本的 HTML 和 CSS 文件，当客户决定在内容区域中插入更多内容时，我有一个内容区域需要增长，但它不起作用。内容区域与下面的其他元素重叠。有人可以帮忙，并解释原因吗？

HTML:

<html>
<head>
<title>Welcome to Boulineau's Website</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="container">
    <div id="sidebar">
        <div id="sidelinks">
            <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><!-- end of sidelinks -->
    </div><!-- end of sidebar -->

    <div id="weeklyspecials">
        <a href="#"><img src="images/weeklyspecials_03.png" alt="Weekly Specials" width="269" height="58" border="0" title="Click for Weekly Specials" /></a>
    </div><!-- end of weeklyspecials -->

    <div id="mainimage">
        <img src="images/mainimage_03.png" alt="Main Image" width="648" height="319" border="0"  />
    </div><!-- end of mainimage -->

    <div id="navigationbar">
        <a href="#"><img src="images/home.png" alt="Home Page" width="45" height="14" border="0" title="Home Page" /></a>
        <a href="#"><img src="images/aboutus.png" alt="About Us" width="65" height="14" border="0" title="About Us" /></a>
        <a href="#"><img src="images/cherrygrovebeach.png" alt="Cherry Grove Beach" width="120" height="14" border="0" title="Cherry Grove Beach" /></a>
        <a href="#"><img src="images/specialevents.png" alt="Special Events" width="92" height="14" border="0" title="Special Events" /></a>
        <a href="#"><img src="images/tidecharts.png" alt="Tide Charts" width="77" height="14" border="0" title="Tide Charts" /></a>
        <a href="#"><img src="images/employment.png" alt="Employment" width="82" height="14" border="0" title="Employment" /></a>
        <a href="#"><img src="images/printablecoupon.png" alt="Printable Coupons" width="98" height="14" border="0" title="Printable Coupons" /></a>
    </div><!-- end of navigation -->

    <div id="content">
        <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><!-- end of content -->

// These div down delow must be push down by the content area when it grows.
    <div id="video">
        <img src="images/video_03.png" alt="Video" border="0" width="263" height="193" title="Video" />
    <div><!-- end of video -->

    <div id="weeklyadbox">
        <img src="images/weeklyad.jpg" alt="Weekly Ad" border="0" width="178" height="147" title="Weekly Ad" />
    </div><!-- end of weeklyadbox -->

</div><!-- end of container -->
</body>
</html>

CSS:

* {
padding: 0;
margin: 0;
} 

body {
text-align: center;
background-image: url("../images/waterbg.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
position: center, top;

}

div#container {
background-image: url("../images/contentbg_02.jpg");
width: 900px;
background-repeat: no-repeat;
margin: 0 auto;
background-color: white;
margin: 0 auto;
border: 1px solid black;
position: relative;
z-index: 0;
height: auto;
}

div#sidebar {
float: left;
position: relative;
left: -40px;
top: 14px;
background-image: url("../images/sidebar_03.png");
background-repeat: no-repeat;
width: 314px;
border: 1px solid black;
height: 1161px;
z-index: 5;
}

div#sidelinks {
position: absolute;
left: 72px;
top: 275px;
cursor: pointer;
}

div#weeklyspecials {
float: right;
margin-top: 47px;
margin-right: 17px;
border: 1px solid black;
}

div#mainimage {
float: right;
position: absolute;
top: 90;
right: 13px;
z-index: 0;
background-attachment: fixed;
}

div#navigationbar {
background-image: url("../images/nav_03.png");
width: 620px;
height: 44px;
background-repeat: no-repeat;
float: right;
position: relative;
margin-top: -780px;
margin-right: 25px;
}

div#navigationbar img {
margin-top: 15px;
}

div#content {
background-image: url("../images/welcome2.png");
background-repeat: no-repeat;
width: 657px;
/*height: 368px;*/
z-index: 100;
float: right;
margin-top: -732px;
background-color: white;
border: 1px solid black;
}

div#content p {
float: left;
margin-top: 140px;
margin-left: 10px;
text-align: left;
line-height: 30px;
font-size: 12px;
font-family: georgia;
border: 1px black solid;
}

div#content p img {
float: right;
}


div#video {
margin-top: -258px;
margin-left: -90px;
padding-top: 10px;
top: 900px;

}

div#weeklyadbox {
float: right;
margin-top: -198px;
margin-right: 80px;
background-image: url("../images/weeklyadbox_04_03.jpg");
background-repeat: no-repeat;
width: 243px;
height: 284px;
padding-top: 120px;
position: relative;
}

如果您想知道，我经常使用边框作为引用。无论如何，我尝试在带有 id="content" 的结束 div 标记之后创建一个名为 spacer 的空 div，并使用了 clear: both，但它没有用。

最佳答案

为了避免出现此类问题，我建议使用 CSS 框架。 Foundation 提供了一个我非常喜欢的 12 列灵活网格。您可以在以下位置找到它:http://foundation.zurb.com

如果您要使用此框架重写 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>

除了减少常见的 CSS 问题之外 - 出现了很多。这个框架提供了一个简单的模型和一致性以及其他一些方便的东西，比如漂亮的内置按钮、选项卡以及移动支持和检测。

关于html - 在 Content Area 增长的同时下推其他元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8691883/

文章推荐： jquery : recreating a jquery menu, 我哪里出错了？

文章推荐： python - Python 中内置类型的多态性

文章推荐： javascript - 使用 JavaScript 进行计算

javascript - 如果
增长，则让
增长
当我输入内容时，如何移动 p 段落下方的所有元素，即 contenteditable。这是我的代码: body, html { margin: 0; padding: 0; backgr
javascript - 当内部 div 增长/收缩时使外部 div 增长/收缩但在它们之间保持边距
我要解决的问题: 我有一个包含 div 的外部 div。 content 内部和外部 div 之间的边距应始终相同。当内部 div 增长/收缩时，外部 div
c - 结构末尾的填充物用于 future 增长
这document Ulrich Drepper 称为“图书馆设计、实现和维护的良好实践”(第 5 页底部): [...] the type definition should always crea
qt - QPainterPath 增长/扩展
有什么方法可以获取 QPainterPath 并将其展开，就像 Photoshop 中的“选择”>“增长...”(或“展开...”)命令一样？我想获取从 QGraphicsItem::shape 返
c - 增长(和收缩)内存池
假设，为了问题的目的，我们有一个内存池，最初分配了 n 个 block 。但是，当达到容量时，池想要增长并变成原来大小的两倍 (2n)。现在可以使用 C 中的 realloc 完成此调整大小操作，但
c - 增长(和收缩)内存池
假设，为了问题的目的，我们有一个内存池，最初分配了 n 个 block 。但是，当达到容量时，池想要增长并变成原来大小的两倍 (2n)。现在可以使用 C 中的 realloc 完成此调整大小操作，但
c++ - 增长 managed_shared_memory 段后出现段错误
我正在研究 boost 库的共享内存部分，为更大的项目做准备。我需要一个共享内存段，在初始化时我不一定知道它的大小，所以我的计划是增加这个段。我的初始实现有一个存储在共享内存中的 boost::in
css - 阻止 FlexChild 增长
这个问题在这里已经有了答案: How to disable equal height columns in Flexbox? (4 个答案) What are the differences bet
javascript - 防止表从长 td 增长
我有一个包含子表的表。我不希望子表影响表格的宽度——在溢出的情况下，我希望两者独立滚动。此外，由于子表是基于切换显示的，所以我不希望主表行根据子表是否可见而跳转 Here's代码笔。我想我可以用 t
html - 防止带有进度条的 flexbox 增长
我有一个带栏的页面设计，它可以有一个、两个或三个栏。这些列的大小应相同。为此我使用了 flexbox，它很好，允许我添加/删除我的列并让浏览器处理列宽的大小调整。现在，当列中的文本大于列的宽度时，
python - 增长 numpy 数值数组的最快方法
要求: 我需要根据数据增长一个任意大的数组。我可以猜测大小(大约 100-200)，但不能保证数组每次都能适合一旦它增长到最终大小，我需要对其执行数值计算，因此我更愿意最终得到一个二维 numpy
python - 增长 numpy 数组
我有一个 3x256 规则的规则集。每个规则映射到一个 3x3 的值网格，这些值本身就是规则。规则示例: 0 -> [[0,0,0],[0,1,0],[0,0,0]] 1 -> [[1,1,1],
html - 了解 flex 增长
我有 3 个 div，如果我给前两个 div flex: 0.5，如果我给了 flex-wrap: wrap，最后一个 div 应该移动到下一行>。如果我错了，请指正。以下是我的 html/css:
css - 如何使用 flex 增长？
在文档和 Bootstrap v4 问题中 (here) ，我看不到任何支持 flex-grow 的计划，例如语法如下: I use all the space lef
python - 增长 numpy 数值数组的最快方法
要求: 我需要从数据中增加一个任意大的数组。我可以猜测大小(大约 100-200)，但不能保证每次都适合数组一旦它增长到最终大小，我需要对其执行数值计算，因此我希望最终得到一个二维 numpy 数
arrays - 增长 slice 时扩展内存(逻辑增长基础阵列的容量)
我知道(并在互联网上阅读-包括此资源)。增加内存的逻辑是:如果len数组小于1024-golang将array乘以2，否则将len乘以1.25(并且我们在源代码中看到了这个问题https://gith
c# - 如何阻止 WPF TextBox 增长
当输入长文本时，WPF TextBox 控件会增长。这个问题已经在 Stackoverflow 中提出了我也引用了一些答案，但我仍然没有找到有效的正确答案。 Here提到了同样的问题，但没有针对此
java - Vaadin 13 Flex 增长
我在使用 Vaadin HorizonalLayout 时遇到问题 - 我希望左侧组件填充大部分水平空间，如 Fiddle 所示但是，当我运行 Vaadin 应用程序时，这两个组件会平分屏幕。
jquery - HTML - 增长/过渡图像/颜色以填充整个网页
关于这个fiddle , 当我点击 a href在这种情况下这是一个图像，我希望图像从 div 开始增长/过渡以通过过渡/缩放填充整个页面它被放置在其中。如果这不可能，我想用 div 的背景颜色填充页
javascript - 滚动、增长、缩小、随机放置图像选取框？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 6 年前。 Improve this q

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 在 Content Area 增长的同时下推其他元素