以下页面代码有一个问题，当我最小化网页时，布局变得困惑并且页面元素“DIV”受到干扰，请尝试并继续最小化浏览器以查看会发生什么，然后告诉我如何解决这个问题。
.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"> <input type="text" name="search" class="search_box">
</div>
最佳答案
试试这个。它可能仍然需要一些修复，但它应该在主要浏览器中呈现得很好。该代码包括在线解释。
<!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 - css位置有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3859674/