CSS Div内容定位

Question

I want to position 2 DIVs in a row like { [DIV 1] [DIV 2] }, but the problem I have is that some part of the div(the background) won't move with the other parts(text). What can I do to get it fixed?

This is the CSS of the DIVs:

   .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;
  }

And this is the HTML part:

<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

Your objective is a little unclear but I'll take a shot anyway. From what you have originally posted you have more markup (HTML) than you need and the same goes for the CSS for what you are asking for. There might be a reason but it's not defined for us.

First off, float your DIVs to the left so they will line up next to each other. Then simply apply a class to each DIV so you can control which background image gets applied to each.

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

I don't understand the point of your background div class but this floats your content divs in a line like you're asking for...please let me know if you're looking for additional help, your question isn't very clear

<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;
}

EDIT: If the background divs are an attempt to set the background of "content" divs, then this would be the code:

    <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

If you want the two divs to display in a row into a container, you can set

clear:both

for the container, and

float: left //or right

for the divs