無法設置div的背景顏色與絕對位置

我是一個新手到HTML/CSS和我試圖創建我的第一個網頁。我無法爲類別inner設置div的背景顏色。截至目前這個div顯示在banner-bottom類中設置的背景顏色。無法設置div的背景顏色與絕對位置

以下是我的html：

.banner-bottom{ 
 
     background:#F7F7F7; 
 
     padding:1em 1em; 
 
     text-align:center; 
 
     position: relative; 
 
    } 
 
    
 
    .floatleft { 
 
    \t float:left; 
 
    \t width: 25%; 
 
    \t height: 100%; 
 
    } 
 
    
 
    .floatright { 
 
    \t float:right; 
 
    \t width: 75%; 
 
    \t background-color: #EEE; 
 
    \t position: relative; 
 
    \t text-align: center; 
 
    } 
 
    
 
    .inner{ 
 
    \t position: absolute; 
 
    \t height:100%; 
 
    \t text-align: center; 
 
    \t background-color: #1b1b1b; 
 
    \t width: 100%; 
 
    } \t

<div class="banner-bottom" width="100%" > \t 
 
     <div class="floatleft"><input type="button" class="pink_btn" value="Who?"/></div> 
 
     <div class="floatright"><div class="inner"> some values here</div></div> 
 
     <div style="clear:both;"></div> 
 
    </div>

什麼我可能做錯了任何指針？感謝幫助！ :)

來源

2015-09-16 Tuhina Singh

當您設置height: 100%您inner類的問題彈出。絕對定位元素被視爲不同，因爲它們會破壞DOM的盒子模型。您可能想要使用topbottomleft和right屬性將絕對定位的元素放置在所需的位置。

HTML：

.banner-bottom{ 
 
    background:#F7F7F7; 
 
    padding:1em 1em; 
 
    text-align:center; 
 
    position: relative; 
 
} 
 

 
.floatleft { 
 
    float:left; 
 
    width: 25%; 
 
    height: 100%; 
 
} 
 

 
.floatright { 
 
    float:right; 
 
    width: 75%; 
 
    background-color: #EEE; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.inner{ 
 
    color: white; /* added to see the text in the black background */ 
 
    position: absolute; 
 
    text-align: center; 
 
    background-color: #1b1b1b; 
 
    right: 175px; 
 
}

<div class="banner-bottom" width="100%" > \t 
 
    <div class="floatleft"><input type="button" class="pink_btn" value="Who?"/></div> 
 
    <div class="floatright"><div class="inner"> some values here</div></div> 
 
    <div style="clear:both;"></div> 
 
</div>

我加color: white;到.inner看到在黑色背景的文本，你可以根據自己的喜好更改。

來源

2015-09-16 15:10:36

感謝您解決此問題。但是現在我面臨着另一個問題：我希望高度爲100％，這樣左右浮動'div'的高度相等。這就是爲什麼我首先在絕對位置上添加額外的'div'和'inner'類的原因。我還需要控制右側div的背景顏色以顯示左側和右側div的分離。我應該將此作爲一個新的單獨問題嗎？ –

如果你想要你可以發表另一個問題，但我可以幫助你在這個線程中，不要擔心。給我一些時間，我在午餐時間。我會稍後再看看:) –

您的問題是.inner中定義的高度，因爲絕對定位不等於相對。如果你在這種情況下定義100％高度將是零高度。將其更改爲PX或EM值或直接將其刪除。照顧絕對和固定定位，肯定會有很多其他的解決方案較不危險的

.banner-bottom{ 
 
     background:#ff0000; 
 
     padding:1em 1em; 
 
     text-align:center; 
 
     position: relative; 
 
    } 
 
    
 
    .floatleft { 
 
    \t float:left; 
 
    \t width: 25%; 
 
    \t height: 100%; 
 
    } 
 
    
 
    .floatright { 
 
    \t float:right; 
 
    \t width: 75%; 
 
    \t background-color: #EEE; 
 
    \t position: relative; 
 
    \t text-align: center; 
 
    } 
 
    
 
    .inner{ 
 
    \t position: absolute; 
 
    \t text-align: center; 
 
     color: white; 
 
    \t background-color: #1b1b1b; 
 
    \t width: 100%; 
 
    } \t

<div class="banner-bottom" width="100%" > \t 
 
     <div class="floatleft"><input type="button" class="pink_btn" value="Who?"/></div> 
 
     <div class="floatright"><div class="inner"> some values here</div></div> 
 
     <div style="clear:both;"></div> 
 
    </div>

來源

2015-09-16 15:04:15

無法設置div的背景顏色與絕對位置

回答

相關問題