問題與DIV職位

-1

你知道爲什麼我的紅色div（.block）被放置在藍色包裝上面，而不是在？也期望文本也在紅色的DIV內。由於http://jsfiddle.net/B3CL6/問題與DIV職位

enter image description here

HTML：

<div class="wrapper blue-background "> 
    <div class="block width100"> 
     <div class="block-left"> 
       <h3>Block left </h3> 
     </div> 
     <!-- End DIV block-left --> 
     <div class="block-right"> 
      <h1>block right</h1> 

     </div> 
     <!-- End DIV block-right --> 
    </div> 
    <!-- End DIV block width100 --> 
</div> 
<!-- End wrapper -->

CSS：

.wrapper { 
    position: relative; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
    width: 980px; 
    overflow: hidden; 
} 
.block { 
    padding: 20px; 
    text-align: justify; 
    background-clip: border-box; 
    box-sizing: border-box; 
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    background: red; 
} 
.width100 { 
    width: 100%; 
} 
.top { 
    margin-top: 30px; 
} 
.blue-background { 
    background: #124191; 
} 
.block-left { 
    float: left; 
    box-sizing: border-box; 
    width: 50%; 
} 
.block-right { 
    float: right; 
    overflow: hidden; 
    box-sizing: border-box; 
    width: 50%; 
}

來源

2013-12-19 Greg

它在內。嘗試使紅色背景變爲半透明，並且您會看到背後有藍色。 –

它在裏面。它的高度小於藍色框的高度，所以你仍然可以看到它背後的藍色框。 – tjboswell

我向父母添加填充，您可以看到紅色div位於藍色div內，http://jsfiddle.net/B3CL6/1/。 –

據我瞭解的是你想要的藍色塊內的紅塊。如果是的話

試試這個。設置填充頂：10px的以填充：10px的

.wrapper { 
    position: relative; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
    width: 980px; 
    overflow: hidden; 
    padding: 10px; 
}

，如果你想裏面的文本做這樣的事，或添加另一種風格的「塊右」文本

H1{ 
    display: inline; 
}

來源

2013-12-19 19:37:45 Kirk

紅格（.block）實際上存在於藍色div（.wrapper）內。正如JoshC所建議的，您可以通過將您的紅色背景設置爲半透明來進行檢查。

來獲取文本是紅色的DIV中，從.wrapper類刪除overflow: hidden;屬性，並將其添加到.block類。這應該可以解決你的問題。

來源

2013-12-19 19:53:47

問題與DIV職位

回答

相關問題