Question

我想将{DIV 1] [DIV 2]}中的2个DIV放在一行，但我遇到的问题是div的某些部分（背景）不会随其他部分移动（文本）。我该怎么做才能解决这个问题？

这是DIV的CSS：

   .container {
       position:relative;

   }

   .content {
       position:relative;
       color:White;
       z-index:5;
   }

   .background {
       position:absolute;
       top:0px;
       left:0px;
       width:35%;
       height:100%;
       background-color:Black;
       z-index:1;
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
       filter: alpha(opacity=50);
       opacity:.5;
   }

   .container1{
       position:relative;
   }

   .content1 {
       position:relative;
       color:White;
       z-index:5;
   }

   .background1 {
       position:absolute;
       top:0px;
       left:0px;
       width:15%;
       height:100%;
       background-color:Black;
       z-index:1;
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
       filter: alpha(opacity=50);
       opacity:.5;
  }

这是HTML部分：

<div class="container">
  <div class="content">
    Random Content Here 1234556678
  </div>
  <div class="background"></div>
</div>

<div class="container1">
  <div class="content1">
    Other Random Content 1423563262
  </div>
  <div class="background1"></div>
</div>

Answer 1

你的目标有点不清楚，但无论如何我都会开枪。根据您最初发布的内容，您可以获得比您需要的更多的标记（HTML），同样适用于您要求的CSS。可能有一个原因，但它没有为我们定义。

首先，将你的DIV漂浮到左边，这样它们就会相互排列。然后只需将一个类应用于每个DIV，以便您可以控制将哪个背景图像应用于每个DIV。

http://jsfiddle.net/p3Hb5/

CSS

#wrapper {
     margin: 0 auto;
     width: 900px;
}
div {
     font: bold 16px/1.5 Arial, sans-serif;
}
.first,
.second {
     float: left;
     padding: 10px;
     color: #FFFFFF;
}
.first {
     background-image: url('http://lorempixel.com/200/200/abstract/');
}
.second {
     background-image: url('http://lorempixel.com/200/200/city/');
}

HTML 的

<div id="wrapper">
     <div class="first">
          <p>Some content content content content content</p>
     </div>
     <div class="second">
          <p>Some content content content content content</p>
     </div>
</div>

Answer 2

我不明白你的背景div课程的重点，但这会让你的内容div像你要求的那样漂浮......如果你正在寻找额外的帮助，请告诉我，你的问题不是'非常清楚

<div class="container">
     <div class="content">
        <p>Random Content Here 1234556678</p>
            <div class="background">
            </div>
    </div>

        <div class="content">
            <p>Other Random Content 1423563262</p>
                <div class="background">
                </div>
        </div>
</div>    


.container {
  margin: auto;
  width: 100%;
  padding: 1em;
}
.content {
  margin: auto;
  padding: 1em;
  float: left;
  background: #666;
  color: #FFF;
}

编辑：如果背景div是尝试设置“content”div的背景，那么这就是代码：

    <div class="container">
     <div class="content" id="one">
        <p>Random Content Here 1234556678</p>
    </div>

        <div class="content" id="two">
            <p>Other Random Content 1423563262</p>
        </div>
    </div>    



.container {
  margin: auto;
  width: 100%;
  padding: 1em;
}
.content {
  margin: auto;
  padding: 1em;
  float: left;
  color: #FFF;
}  
#one {
  background: #09F;
}
#two {
  background: #666;
}

http://jsfiddle.net/2kq3r/

Answer 3

如果您希望两个div连续显示在容器中，可以设置

clear:both

表示容器，

float: left //or right

表示divs

CSS Div定位与内容

3 个答案: