使用內嵌塊的div互相重疊

我的div有問題，互相重疊，兩者之間沒有空格。我已經嘗試了文本對齊中心，刪除和添加divs之間的空白區域，設置邊距，似乎沒有任何工作。我只需要將這些項目分開。任何幫助表示讚賞。使用內嵌塊的div互相重疊

下面是一個例子小提琴：https://jsfiddle.net/vn6t3nwd/

HTML：

<div id="timer-container"> 
    <div id="timermode">up</div><div id="timermode">down</div> 
    <div id="timercontrol">stop</div> 
    <div id="timercontrol">go</div> 
</div>

CSS：

#timer-container { 
    position: relative; 
    width: 100%; 
    padding-bottom: 56.25%; 
    display: table; 
    background-color: black; 
} 

#timermode { 
    position: absolute; 
    width: 30%; 
    font-family: "Avenir-Light"; 
    font-size: 40px; 
    color: white; 
    vertical-align: top; 
    display: inline-block; 
} 

#timercontrol { 
    position: absolute; 
    display: inline-block; 
    font-size: 40px; 
    font-family: "Avenir-Light"; 
    color: white; 
}

編輯：問題是具有位置：絕對的，但除去其引起的高度我的背景略有增加。我認爲這是由於我的底部填充了56.25％，但我需要這樣做。無論如何有兩種方式？

Edit2：更新小提琴的答案。我通過增加另一個容器來增加身高。

來源

2016-05-05 Jason

您有重疊，因爲position: absolute;

此外，id被製成unique identifier，如果你需要使用相同的CSS爲多個HTML元素，你應該把它定義爲一個class

HTML：

<div id="timer-container"> 
    <div class="timermode">up</div> 
    <div class="timermode">down</div> 
    <div class="timercontrol">stop</div> 
    <div class="timercontrol">go</div> 
</div>

CSS：

#timer-container { 
    ... 
} 
.timermode { 
    ... 
} 
.timercontrol { 
    ... 
}

來源

2016-05-05 15:22:07

你們是正確的，位置：絕對是導致問題，但通過去除它的背景變化的高度。我認爲這是由於我在容器上填充了56.25％。有沒有辦法解決這個問題？ – Jason

刪除子元素的絕對位置將允許它們按預期內聯顯示。另外，如前所述，只對唯一元素使用id屬性，如下例所示，使用重複元素的類。

#timer-container { 
 
    position: relative; 
 
    width: 100%; 
 
    padding-bottom: 56.25%; 
 
    display: table; 
 
    background-color: black; 
 
} 
 
.timermode { 
 
    width: 30%; 
 
    font-family: "Avenir-Light"; 
 
    font-size: 40px; 
 
    color: white; 
 
    vertical-align: top; 
 
    display: inline-block; 
 
} 
 
.timercontrol { 
 
    display: inline-block; 
 
    font-size: 40px; 
 
    font-family: "Avenir-Light"; 
 
    color: white; 
 
}

<div id="timer-container"> 
 
    <div class="timermode">up</div> 
 
    <div class="timermode">down</div> 
 
    <div class="timercontrol">stop</div> 
 
    <div class="timercontrol">go</div> 
 
</div>

來源

2016-05-05 15:24:47

** ID屬性**應該是唯一的 –

我是一個年輕有抱負的程序員，所以我的答案可能和可能幫不了你。我認爲這是因爲絕對的立場。我在JSFiddel中編輯你的代碼，並注意到當我刪除絕對樣式時，它根據它們的相對位置來定位所有元素。希望能幫助到你。快樂的編碼。

來源

2016-05-05 15:30:37

使用內嵌塊的div互相重疊

回答

相關問題