CSS中的相对绝对定位问题答案

【问题标题】：Problem in relative-absolute positioning in CSSCSS中的相对绝对定位问题
【发布时间】：2011-06-03 02:32:11
【问题描述】：

我想在新行中一个接一个地显示一些内容，这样第一个 div 左对齐，第二个右对齐，第三个 div 左对齐，第四个再次右对齐。

我基于相对绝对定位为它编写了 HTML/CSS 代码。然而，我所有的 div 都被重叠了。请根据相对绝对定位的概念告诉我我做错了什么？

     <html>
     <head>
     <link rel="stylesheet" type="text/css" href="styles.css" />
     </head>
     <body>
     <div class='topContainer'>
       <div class='leftContent'>This div should be left aligned</div> 
     </div>
     <div class='topContainer'>
       <div class='rightContent'>This div should be right aligned</div>
     </div>
     <div class='topContainer'>
       <div class='leftContent'>This div should be left aligned</div>
     </div>
     <div class='topContainer'>
       <div class='rightContent'>This div should be right aligned</div>
     </div>
     </body>
     </html>

CSS 代码：-

     .topContainer{
      position:relative;
      width:600px;
      }

      .leftContent{
      padding:5px;
      background: rgba(255,255,255,0.8);
      width: 390px;
      margin:10px;
      left:1px;
      position:absolute; 
      }

      .rightContent{
      padding:5px;
      background:rgba(255,255,255,0.4)
      width: 390px;
      margin:10px;
      right:1px;
      position:absolute;
      }

抱歉没有把问题说清楚。

添加布局结构。我要创建的布局如下：-

      This div should be left aligned
           This div should be right aligned
      This div should be left aligned
           This div should be right aligned

【问题讨论】：

标签： html css

【解决方案1】：

您可以这样做。它更简单：

<html>
    <head>
        <style type="text/css" media="screen">
            .container{
                width:600px;
                background:#fa2;
            }

            .column{
                background: rgba(255,255,255,0.8);
                width: 290px;
                height: 200px;
                background: #222;
                margin-right: 10px;
                float: left;
            }
            .clear {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class='container'>
            <div class='column'>This div should be left aligned</div> 
            <div class='column'>This div should be right aligned</div>
            <div class='column'>This div should be left aligned</div>
            <div class='column'>This div should be right aligned</div>
        </div>
        <div class="clear"> </div>
    </body>
</html>

基本上，列容器的宽度为 290+10 像素，它们向左浮动，这意味着每行只能容纳两列，因为父容器的宽度为 600 像素。

这是解决问题的更简单方法。

【讨论】：

您可以在容器上使用 overflow:hidden 并取消清除 div 所需的额外标记。
嗯，但这确实有点像 hack。除非我确定它在 IE6+ 中没有任何副作用，否则我不会采用该解决方案。
在这种情况下，它会正常工作，实际上根本不需要清除。但是如果我不清楚是否要在

【解决方案2】：

您的容器为 600 像素，但每个 div 的宽度为 410 像素（包括边距）。每个距离左侧或右侧 1px，每个 div 占用 411px。总计 - 822 像素。所以，它们会在中间重叠。

【讨论】：