0

鉴于此 HTML 文档

<html> 
<head> 
 <title>CSS Layout</title> 
 <link href="layout.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
  <div id="header">Header 900x100 px</div> 
  <div id="righttop">RightTop <br />150x200 px</div> 
  <div id="lefttop">LeftTop 150x75 px</div> 
  <div id="content">Content 600x400 px</div> 
  <div id="rightbottom">RightBottom 150x200 px</div> 
  <div id="footer">Footer 900x100 px</div> 
</body>

和这个 CSS 样式表

body, div { 
   padding: 0; 
   margin: 0; 
   border: solid 1px; 
   width: 900px; 
} 
#header, #footer { 
   width: 898px; 
   clear: both; 
   height: 100px; 
} 
#righttop, #rightbottom{ 
   float: right; 
   width: 150px; 
   height: 200px; 
} 
#rightbottom { 
   clear: right; 
} 
#content { 
   float: left; 
   width: 591px; 
   height: 403px; 
} 
#lefttop { 
   width: 150px; 
   height: 100px; 
   float: left; 
}

我将如何将“RightBottom”框移动到“LeftTop”框的正下方而不会弄乱总体布局？

4

1 回答 1

1

我已经为您更新了代码并进行了必要的更正。这是一个供您查看的 JSFiddle 文件：http: //jsfiddle.net/yv7vs/

HTML：

<html> 
<head> 
    <title>CSS Layout</title> 
    <link href="layout.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 

    <div id="header">Header 900x100 px</div>
    <div id="righttop">RightTop<br/>150x200 px</div>
    <div id="lefttop">LeftTop 150x75 px</div>
    <div id="content">Content 600x400 px</div>
    <div id="rightbottom">RightBottom 150x200 px</div>
    <div id="footer">Footer 900x100 px</div>
</body>

CSS：

body, div {
    padding:0;
    margin:0;
    border:solid 1px;
    width: 900px;
}
#header, #footer {
    width:898px;
    clear: both;
    height: 100px;
}
#righttop, #rightbottom {
    width:150px;
    height: 200px;
}
#righttop {
    float:right;
}
#rightbottom {
    position: absolute;
    top: 205px;
}
#content {
    float:left;
    width:591px;
    height: 403px;
}
#lefttop {
    width:150px;
    height: 100px;
    float: left;
    position: relative;
}
于 2013-10-15T00:22:39.910 回答