1

我目前正在使用 DIV 测试一些东西，而不是总是使用表格。

所以我创建了一个小设计，例如：

<div id="container">
    <div id="header"><h1>Header of the page</h1></div>
    <div style="width: 27px; float: left;"><img src="style/images/top_left_corner.jpg" alt="" /></div>
    <div style="width: 859px; float: left;"><img src="style/images/top_bar.jpg" alt="" /></div>
    <div style="width: 28px; float: left;"><img src="style/images/top_right_corner.jpg" alt="" /></div>
    <div style="width: 27px; float: left;"><img src="style/images/left_vert_bar1.jpg" alt="" /></div>
    <div style="width: 859px; float: left;">
        <div id="top_content">
            <div id="explanation">
                <span>Some text comes here</span>
            </div>

            <div id="form">
                <form method="post" action="index.php" enctype="multipart/form-data">
                    <label for="file">File:</label>
                    <input type="file" name="datei" size="40" maxlength="100000" />&nbsp;<input type="submit" name="sub" value="Submit" />
                </form>
            </div>
        </div>
    </div>
    <div style="width: 28px; float: left;"><img src="style/images/right_vert_bar1.jpg" alt="" /></div>
    <div class="left_dyn">&nbsp;</div>
        <div id="middle_content">
            <div id="form_output">Here is the outcome of the Form</div>
        </div>
    <div class="right_dyn">&nbsp;</div>
    <div style="width: 27px; float: left; clear: left;"><img src="style/images/left_vert_bar2.jpg" alt="" /></div>
    <div id="placeholder">&nbsp;</div>
    <div style="width: 28px; float: left;"><img src="style/images/right_vert_bar2.jpg" alt="" /></div>
    <div style="width: 27px; float: left;"><img src="style/images/bottom_left_corner.jpg" alt="" /></div>
    <div style="width: 859px; float: left;"><img src="style/images/bottom_bar.jpg" alt="" /></div>
    <div style="width: 28px; float: left;"><img src="style/images/bottom_right_corner.jpg" alt="" /></div>
    <div id="footer"><span>Some Footer Text</span></div>
</div>

现在，带有class="left_dyn"并class="right_dyn"显示背景图像的 DIV 已在我的 CSS 文件中设置，并且当 DIV 中有一些内容时应该垂直重复id="form_output"

这是 CSS 文件中的方式class="left_dyn"和class="right_dyn"外观：

/* Dyn Design */
.left_dyn {
         background: url('../images/left_dyn_bar.jpg') repeat-y scroll;
         width: 27px;
         float: left;
}

.right_dyn {
         background: url('../images/right_dyn_bar.jpg') repeat-y scroll; 
         width: 28px;
         float: left;
}

但是，当我在 DIV 中输入一些内容时，id="form_output"DIVclass="left_dyn"会class="right_dyn"增加高度，但 bakcground 图像不会垂直重复:(

我的印象是我没有看到所有这些树木的树林。

4

2 回答 2

1

好的，我找到了解决方案：

就像我上面提到的那样，问题是您的 left_dyn 和 right_dyn 列不会随着 form_output div 扩展。该问题的一种解决方案是在这两个 div 上设置以下 css 规则：

padding-bottom: 32000px; /* Arbitrary number big enough to cover expanding content */
margin-bottom: -32000px;

这将基本上扩展 left_dyn/right_dyn div 以匹配您的 form_output div 的高度。

然后，您必须在父容器上进行设置，因为这将隐藏任何溢出：

overflow: hidden;

我尝试在您的页面上编辑此内联内容，并注意到它可以正常工作，但您的页脚有问题。这可以通过将页脚放在父包装之外轻松解决。

我在这里敲了一个快速演示来解释效果：http: //jsfiddle.net/mWLL9/

于 2012-11-01T13:34:15.170 回答
0

@C.Felix 这是一个非常好的主意，因为现在没有人使用table创建网站。因为搜索引擎不抓取表格网站或者抓取速度很慢。因此，请始终尝试创建少表设计，这对 SEO 有好处。

您可以从这个网站在线学习：w3schools.com

于 2012-11-01T16:45:38.840 回答