Question

所以，我正在尝试使用一些列代码来完美排列三列。不幸的是，当我尝试它时，我让左右列浮动在中间列上，如下所示：

http://i.imgur.com/p4ln5Ri.png

这是我使用的css代码。作为参考，＃left表示左列，#main表示中间，＃right表示右列。

HTML：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>3-Column</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link href="ThreeColumnProjectCSS.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <div id="header"><h1>Header</h1></div>
 <div>
 <div class="column">
 <h1>Left</h1>
 <ul>
 <li>Lorem ipsum dolor sit amet</li>
 <li>Consectetur adipisicing elit</li>
 <li>Sed do eiusmod tempor incididunt</li>
 <li>Ut labore et dolore magna aliqua</li>
 <li>Ut enim ad minim veniam</li>
 </ul>
 </div>

 <div class="column">
 <h1>Header - Main</h1>
 <p>Ullamco laboris nisi sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In reprehenderit in voluptate lorem ipsum dolor sit amet, velit esse cillum dolore. Sunt in culpa ut enim ad minim veniam, consectetur adipisicing elit. In reprehenderit in voluptate qui officia deserunt sed do eiusmod tempor incididunt.</p>
 <p>Excepteur sint occaecat duis aute irure dolor sunt in culpa. Quis nostrud exercitation consectetur adipisicing elit. In reprehenderit in voluptate lorem ipsum dolor sit amet, cupidatat non proident. Ut labore et dolore magna aliqua.</p>
 <p>Quis nostrud exercitation qui officia deserunt eu fugiat nulla pariatur. Consectetur adipisicing elit, lorem ipsum dolor sit amet, in reprehenderit in voluptate. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Velit esse cillum dolore qui officia deserunt ut labore et dolore magna aliqua.</p>
 <p>In reprehenderit in voluptate sunt in culpa. Sed do eiusmod tempor incididunt ullamco laboris nisi velit esse cillum dolore. In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Excepteur sint occaecat lorem ipsum dolor sit amet, quis nostrud exercitation.</p>
 <p>Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. Ullamco laboris nisi ut enim ad minim veniam, in reprehenderit in voluptate. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, velit esse cillum dolore.</p>
 </div>

 <div class="column">
 <h1>Right</h1>
 <p>Sed do eiusmod tempor incididunt excepteur sint occaecat duis aute irure dolor.</p>
 </div>
 </div>
 </body>
 </html>

CSS：

html, body {
   margin: 0px;
   padding: 0px;
   border: 0px;
 }

 #left {
   position: absolute;
   left:0px;
   top:100px;
   width:200px;
   background:#fff;
   border:1px solid #000;
   padding: 0px 5px;
 }

 #right {
   position: absolute;
   right:0px;
   top:100px;
   width:200px;
   background:#fff;
   border:1px solid #000;
   padding: 0px 5px;
 }

 #header {
   background:#fff;
   /* IE 5.5 */
   height:81px;
   border-top:1px solid #000;
   border-right:1px solid #000;
   border-left:1px solid #000;
   voice-family: "\"}\"";
   voice-family: inherit;
   /* IE 6 */
   height: 99px;
 }
 html]body #banner {
   /* Mozilla and Safari */
   height: 99px;
 }

 #main {

   background:#fff;
   /* these two margins affect IE 5.5 */
   margin-left: 200px;
   margin-right:200px;
   border:1px solid #000;
   padding: 0px 5px;
   voice-family: "\"}\"";
   voice-family: inherit;
   /* these two margins affect IE 6 */
   margin-left: 200px;
   margin-right:200px;
 }
 html]body #main {
   /* these two margins affect Mozilla and Safari */
   margin-left: 212px;
   margin-right:212px;
 }
 #footer {
   width: 100%;
   height: 35px;
   border: solid #000000;
   border-width: 1px 0;
   margin: 0;
 }

我很感激帮助。

Answer 1

我会摆脱绝对位置并使用网格系统。

例如：http://jsfiddle.net/C6CnJ/7/

.row { clear: both; }  

.column {
    width: 130px;
    margin: 0 10px 20px;
    float: left;
}

<div class="row">
    <div class="column">Lorem ipsum...</div>
    <div class="column">Lorem ipsum...</div>
    <div class="column">Lorem ipsum...</div>
</div>
<div class="row">
    <div class="column">Hello!</div>
</div>

元素定位不正常

1 个答案: