0

我想像 { [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>
4

3 回答 3

0

你的目标有点不清楚，但我还是会试一试。从您最初发布的内容来看，您的标记 (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>
于 2013-07-23T22:27:00.090 回答
0

我不明白你的背景 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 试图设置“内容” 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/

于 2013-07-23T22:27:08.443 回答
0

如果想让两个 div 连续显示到一个容器中，可以设置

clear:both

对于容器，和

float: left //or right

对于 div

于 2013-07-23T22:53:21.760 回答