CSS Div使用內容定位

我想在像[{DIV 1] [DIV 2]}這樣的行中放置2個DIV，但是我遇到的問題是部分div（背景）不會隨着其他部分（文本）。我能做些什麼來修復它？CSS 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>

來源

2013-07-23 Alex Sova

是否有你的應用背景有一個額外的DIV理由嗎？你能向我們展示一個你希望實現的例子嗎？ – hungerstar

爲什麼你要在不包含內容的DIV上設置背景？ – DontVoteMeDown

你是否試圖做這樣的事情？ http://jsfiddle.net/p3Hb5/ – hungerstar

你的目標是有點不清楚，但無論如何，我會拍攝。從你最初發布的內容來看，你有更多的標記（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-23 22:27:00 hungerstar

我不明白你的背景DIV類的點，但這個浮動內容div的一條線就像你要求...請讓我知道，如果你正在尋找addi佐丹奴國的幫助，你的問題不是很清楚

<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-23 22:27:08 samrap

如果你想在兩個div在一行放入容器中顯示，可以設置

clear:both

的容器，

float: left //or right

的div的

來源

2013-07-23 22:53:21

CSS Div使用內容定位

回答

相關問題