Question

在此处的html页面中，body标记的http://pastehtml.com/view/axfov9710.html框仅生成，直到中间的粉红色框和底部的float框被忽略。我使用Firebug和Chrome网络检查器进行了检查。当我尝试以编程方式提取页面元素的几何时，这会产生问题。如何对整个页面强制执行与body标签相对应的框。

HTML标记：

<html>
<head>
    <title>Page</title>

    <style type="text/css">
        body {
            width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

        #header {
            height: 200px;
            margin: 2px;
            margin-bottom: 10px;
            font-family: Arial,Helvetica,sans-serif;
            font-size: XX-large;
        }

        #first_half {
            margin-bottom: 20px;
            overflow: hidden;
        }

        #first_half div.summaries_box {
            float: left;
            margin-right: 10px;
            width: 550px;
        }

        #para_right {
            float: right;
            width: 440px;
            background-color: gray;
        }

        #second_half {
            clear: both;
        }

        #second_half div.summaries_box {
            float: left;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
            clear: both;
        }

        div.summary {
            width: 260px;
            margin: 5px;
            float: left;
            background: lightblue;
        }

        h3.summary_header {
            font-weight: bold;
            font-variant: small-caps;
        }

        #snippets_horizontal {
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;
        }

        #snippets_horizontal .snippet {
            float: left;
            width: 45%;
            margin-right: 5%;
            font-size: small;
            background-color: lightpink;
        }
    </style>
</head>

<body>
    <div id="header">
        <p>Lorem ipsum dolor sit amet</p>
    </div>

    <div id="first_half">
        <div class="summaries_box">
            <div class="summary">
                <h3 class="summary_header">Lorem ipsum dolor sit amet</h3>
                <ul class="summary_list">
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                </ul>
            </div>

            <div class="summary">
                <h3 class="summary_header">Lorem ipsum dolor sit amet</h3>
                <ul class="summary_list">
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                </ul>
            </div>

            <div class="summary">
                <h3 class="summary_header">Lorem ipsum dolor sit amet</h3>
                <ul class="summary_list">
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                </ul>
            </div>

            <div class="summary">
                <h3 class="summary_header">Lorem ipsum dolor sit amet</h3>
                <ul class="summary_list">
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                </ul>
            </div>
        </div>

        <div id="para_right" class="para">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.</p>
        </div>
    </div>

    <div id="second_half">
        <div id="snippets_horizontal">
            <div class ="snippet">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
            </div>

            <div class ="snippet">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
            </div>
        </div>

        <div class="summaries_box">
            <div class="summary">
                <h3 class="summary_header">Lorem ipsum dolor sit amet</h3>
                <ul class="summary_list">
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                </ul>
            </div>

            <div class="summary">
                <h3 class="summary_header">Lorem ipsum dolor sit amet</h3>
                <ul class="summary_list">
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                </ul>
            </div>

            <div class="summary">
                <h3 class="summary_header">Lorem ipsum dolor sit amet</h3>
                <ul class="summary_list">
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                    <li class="summary_title_snip"><p>Lorem ipsum dolor sit amet</p></li>
                </ul>
            </div>
        </div>
    </div>

</body>

Answer 1

#second_half需要clearfix。

#second_half {
    clear: both;
    overflow: hidden;
    _zoom: 1; /* for ie6 */
}

Answer 2

我会在身体标签下放置另一个“容器”标签，然后在身体完成之前结束，然后将宽度应用于身体而不是身体。

<body>
<div id"container">
...
</div>
</body>

Answer 3

答案是clyfish和Magnum提供的组合。将<div>应用于具有overflow: hidden;样式属性的浮点数。

正文框只生成一半的页面

3 个答案: