div的使用CSS的定位：絕對定位div的佈局問題

下面的代碼顯示了一個圓形加上一個酒吧，使用previous post構建。我遇到的問題是bar在實踐中的固定高度等於circle的高度。我想這是因爲absoluteinline-block。然而，我似乎需要absoluteinline-block，因爲沒有他們text是放在酒吧下面，而不是在裏面。div的使用CSS的定位：絕對定位div的佈局問題

我遇到的問題是，如果text div內的文本不適合bar（太多文本），文本會在欄下方運行（所以欄的高度不會擴大）。第二個問題是，如果bar內的文本很少，則bottom-half與bar重疊。如何調整我的代碼以解決這些問題？

.tophalf { 
 
    width: 100%; 
 
    background: #F1F3F2 none repeat scroll 0% 0%; 
 
    padding: 5em; 
 
} 
 
.bar { 
 
    background: #333; 
 
    margin-left: 75px; 
 
    min-height: 150px; 
 
} 
 
.circle { 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 50%; 
 
    background: white; 
 
    box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
 
    margin-left: -75px; 
 
    position: relative; 
 
    vertical-align: middle; 
 
    margin-right: 20px; 
 
    overflow: hidden; 
 
} 
 
.text { 
 
    margin-top: 1em; 
 
    position: absolute; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    color: #222; 
 
}

<div class="tophalf"> 
 
    <div class="container"> 
 
    <div class="col-md-12"> 
 
     <div class="bar"> 
 
     <div class="circle"></div> 
 
     <div class="text">My text</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="bottom-half"></div>

中的代碼片段文本「我的文字」顯示了欄的下方，而它顯示了在裏面我的應用程序吧。我不知道原因。也許是因爲引導程序的容器div，該代碼片段可能沒有這樣處理。

來源

2015-06-20 Nick

文本確實因爲「位置：絕對」欄下的放克屬性。看看其餘部分，但並不真正得到你的問題。編輯：好吧，酒吧似乎在增加身高。重疊問題不在哪裏被發現。但我可能不完全明白你想要做什麼。 https://fiddle.jshell.net/mnocmL7r/是否正確？或者你想讓它看起來像你以前的文章？ –

是的，我無法看到它在開發服務器上的樣子。我不明白。文本應該位於酒吧內（開始） – Nick

瀏覽器無法調整「欄」的高度，因爲您正在使用「絕對」定義「文本」的位置。你可以請使用下面的更新CSS樣式，看看它是否有幫助？

.circle { 
 
    width: 150px; 
 
    height: 150px;` 
 
    border-radius: 50%; 
 
    background: white; 
 
    box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
 
    margin-left: -75px; 
 
    position: relative; 
 
    float: left; 
 
    vertical-align: middle; 
 
    margin-right: 20px; 
 
    overflow: hidden; 
 
} 
 
.text { 
 
    margin-top: 1em; 
 
    vertical-align: top; 
 
    color: #222; 
 
}

來源

2015-06-20 01:02:18 Martin

太棒了，這工作！ – Nick

如果您需要一個元素根據其內容來調整其高度，則可以將其設置爲display: block或設置height: auto。

來源

2015-06-20 00:49:28

如果文本div的位置是絕對的，它不會影響包裝的高度。

來源

2015-06-20 00:55:34

div的使用CSS的定位：絕對定位div的佈局問題

回答

相關問題