Question

我想在新行中一个接一个地显示一些内容，使得第一个div左对齐，第二个div右对齐，第三个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

Answer 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 px，它们向左浮动，这意味着每行只能容纳两列，因为父容器的宽度为600px。

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

Answer 2

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

CSS中相对绝对定位的问题

2 个答案: