Question

以下页面代码存在一个问题，当我最小化网页布局bocome凌乱和页面项“DIV”干扰时，尝试并继续缩小浏览器以查看会发生什么，然后告诉我如何解决这个问题。 / p>

.banner{
        border:2px solid;
        background-color:#c9c9c9;
        position:absolute;

        top:0.5%;       
        height:21%;
        width:96%;
        align:center;
    }

.ban_pad{
        padding:10px;
    }


.search_block_position{
        position:absolute;
        left:2.5%;
        top:55%;
    }


.search_box{
        border-color:#4B8A08;
        border-style:solid;



    }


.search_button{
        border-color:#4B8A08;
        border-style:solid;
        background-color:#4B8A08;
    }


.logo{
        border:solid 2px #000;
        background-color:#00f;
        width:30%;
        height:60%;
        position:inherit;
        top:2%;
        right:.5%;
    }


.banner_items{
        border:solid 1px #000;
        position:absolute;
        top:51%;
        left:41%;
        color:#fff;
    }



</style>

<div class="ban_pad">
<div class="banner">

<img src="../images/logo.jpg" class="logo" alt="logo here">

<div class="banner_items" style="left:32%">
<img src="../images/add_book.jpg"><p style="position:relative;top:-18px;">Add</p>
</div>

<div class="banner_items">
<img src="../images/request_book.png"><p style="position:relative;top:-18px;">Request</p>
</div>

<div class="banner_items" style="left:50%">
<img src="../images/join_stuff.gif"><p style="position:relative;top:-18px;">join</p>
</div>

<div class="search_block_position">
<input type="submit" name="search_button" class="search_button" value="search" style="color:#fff">&nbsp;<input      type="text" name="search" class="search_box">
</div>

Answer 1

它的填充物。如果您调整窗口大小并使其变小，如果10个像素大于页面空间的剩余百分比，则会出现问题。您需要练习学习如何混合固定宽度和流体宽度。

Answer 2

首先，摆脱所有绝对位置：它们从文档流中删除它们被分配到的每个元素，这就是导致表单元素重叠的原因。你应该使用float：left;属性。这样，他们就会安排自己而不会相互“干扰”。您可能需要调整边距以正确定位它们。其次，正如Teo所说，当你使用相对宽度时要小心：将它们与固定混合可能会让你遇到麻烦和痛苦。还要记住，在IE6中填充的呈现方式不同（唉，许多人仍在使用），所以尽量避免使用它们。

Answer 3

试试这个。它可能仍然需要一些修复，但它应该在主浏览器中很好地呈现。该代码包括内联解释。

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>layout example</title>
    <style type="text/css">
    * { /* initializing all elements to zero margin & padding is often a good idea: you will have a 'clean' start */
        margin: 0;
        padding: 0;
    }
    #container {
        margin: 10px;
    }
    #banner { /* I need this to be a floating element, so that it can contain other floating elements without them 'escaping' outside it */
        float: left;
        width: 100%;
        min-width: 635px; /* set this to avoid the inner elements to "flow below" when you resize the window (remove this setting to see what happens without it) */

        background: #EEE;
        border: 1px solid #999;
    }
    #banner .logo { /* it is correct for it to be the first element of the banner, but I need it to be on the right side of the page, so I FLOAT it right */
        float: right;
        margin: 2% 1%;
        width: 30%; /* there is no need to specify an height, the image will scale automatically according to the current width. moreover, pecentual heights do not work wery well */
        background: #9AC;
        border: 1px solid #039;
    }
    #banner .item { /* adjust margins according to you needs. this settings are in common to all the inner elements of the banner */
        float: left;
        margin: 2% 2.5%;
    }
    #banner .add { /* you may specify a background image to substitute/add to the text of the various elements (this method is preferrable to using an IMG tag) */
        background: url(images/some_image.gif) 0 0 no-repeat;
    }
    #banner .request {
        background: url(images/some_other_image.gif) 0 0 no-repeat;
    }
    #banner .join {
        background: url(images/still_another_image.gif) 0 0 no-repeat;
    }
    #banner .add span,
    #banner .request span,
    #banner .join span { /* with this trick you can hide the text from view without hiding it from spiders and screen readers (uncomment it if you need to use it) */
        /* 
        display: block;
        overflow: hidden;
        height: 0;
        */
    }
    .clear { /* here I set a clear element that will restore the normal flow of the document after floating elements */
        clear: both;
    }
    hr.clear { /* here I hide the standard properties of the ruler in order to hide it from view */
        border: 0 none;
        height: 0;
        visibility: hidden;
    }
    </style>
    <!-- the following code is needed to set the min-width property for IE 6 and below, since it is not supported -->
    <!--[if lte IE 6]><style type="text/css">#banner { width: 650px; }</style><![endif]-->
</head>

<body>
    <div id="container">
        <div id="banner">
            <img class="logo" alt="logo goes here" title="this is the name of the company/website" />
            <form method="post" action="#" class="item">
                <p><input type="text" name="search" class="search_box"> <input type="submit" name="search_button" class="search_button" value="search"></p>
            </form>
            <p class="item add"><span>Add</span></p>
            <p class="item request"><span>Request</span></p>
            <p class="item join"><span>Join</span></p>
        </div>
        <hr class="clear" /><!-- this element is needed to restore the normal document flow (doesn't have to be necessarily an HR, as long as it has the clear property set, but in this case it fits well semantically, since it separates one section of the page from the rest) -->
        <div class="some-other-content">
            blah blah blah...
        </div>
    </div>
</body>
</html>

css位置的问题

3 个答案: