2分位置「最小高度」和「頂部」屬性

我有2個div與最小高度。第一個屬性爲470px。我希望第二個div在第一個div下方顯示staright而不在其間。我也嘗試過顯示：塊並把div放到一張桌子裏，這兩個都沒有更好的工作。這裏是TE CSS：2分位置「最小高度」和「頂部」屬性

#content { 
    width: 100%; 
    position: absolute; 
    top: 470px; 
    background: #1C1C1C; 
    min-height: 100px; 
    overflow: hidden; 
} 

#content2 { 
    width: 100%; 
    position:; 
    top:; 
    background: #333333; 
    min-height: 100px; 
    overflow: hidden; 
}

HTML：

<div id="content"> 
     <p>texttexttexttexttexttexttexttexttexttexttexttexttext</p> 
    </div> 


    <div id="content2"> 
     <p>texttexttexttexttext</p> 
    </div>

來源

2015-08-21 Micki12

添加完整的HTML也 – Tushar

歡迎堆棧溢出！絕對定位是佈局網頁的非常糟糕的方法。它非常不靈活，並且有更好和更加敏感的選項[** LearnLayout.com **]（http://learnlayout.com/） –

位置：第一個div的絕對值將它從流頁面，所以第二個div就是忽略它。你可以把它們都放在一個父級的div中，並且把這個位置改爲絕對的？ –

一旦你絕對位置，你把它拿出來的公文流轉的，所以你不能真的東西后馬上來到一個元素，除非你絕對定位它。我改變它只是使用頂部邊緣，把它放在你想要的地方。如果你需要頂部470px的元素，那麼你可以絕對定位這些元素。

我放入的邊框僅用於說明。

#content { 
 
    border: 1px solid red; 
 
    margin-top: 470px; 
 
    background: #1C1C1C; 
 
    min-height: 100px; 
 
    overflow: hidden; 
 
} 
 

 
#content2 { 
 
    border: 1px solid blue; 
 
    background: #333333; 
 
    min-height: 100px; 
 
    overflow: hidden; 
 
}

<div id="content">First DIV</div> 
 
<div id="content2">Second DIV</div>

來源

2015-08-21 15:12:27 Lance

使用絕對定位檢查我的[answer]（http://stackoverflow.com/a/32144082/2025923），但改變它的HTML結構可以完成 – Tushar

@Tushar是的，這也適用。我給你一個upvote。 – Lance

您還沒有發佈你的HTML，但是這是我的胡亂猜測。

試試這個：

<style> 
#content { 
    width: 100%; 
    position: relative; 
    background: yellow; 
    min-height: 100px; 
    overflow: hidden; 
} 

#content2 { 
    width: 100%; 
    position: relative; 
    background: blue; 
    min-height: 100px; 
    overflow: hidden; 

} 
</style> 

<div id = "content"> 
<p> Content - 1 </p> 
</div> 
<div id = "content2"> 
<p> Content - 2 </p> 
</div>

來源

2015-08-21 15:09:54 user5173426

使用'最小高度'而不是'高度'，即_minimum_高度，不固定也可以增加 – Tushar

因爲#content定位絕對，你不能在不改變HTML結構做到這一點。

可以將容器元素添加到與同一top定位absolute LY作爲#content1的div S和添加容器內的兩個div•不用position。

#container { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 470px; 
 
} 
 
#content { 
 
    border: 1px solid red; 
 
    background: #1C1C1C; 
 
    min-height: 100px; 
 
    overflow: hidden; 
 
} 
 
#content2 { 
 
    width: 100%; 
 
    background: #333333; 
 
    min-height: 100px; 
 
    overflow: hidden; 
 
}

<div id="container"> 
 
    <div id="content"> 
 
    <p>texttexttexttexttexttexttexttexttexttexttexttexttext</p> 
 
    </div> 
 
    <div id="content2"> 
 
    <p>texttexttexttexttext</p> 
 
    </div> 
 
</div>

來源

2015-08-21 15:24:30 Tushar

2分位置「最小高度」和「頂部」屬性

回答

相關問題