溢出容器與同樣高的孩子
P粉207969787
P粉207969787 2024-03-22 13:42:51
0
2
715

我搜尋了可用的問題,但沒有找到解決方案。

我試圖將水平溢出容器的所有元素的高度設定為等於最長元素的高度。

body {
    
}
section{
    width: 300px;
    background: lightblue;
    overflow: auto;
    white-space: nowrap;
}
div{
    display: inline-block ;
    max-width: 150px;
    background: lightgreen;
    margin: 5px;
    white-space: normal;
    
    /* not working */
    height: 100%;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <section>
            <div>
                hi there how are you push just IV by Rd hi TX cu
            </div>
            <div>
                hi there how are you push just IV by Rd hi TX cu jdi HD so of fr edg of Dr edg KB hi
            </div>
            <div>
                hi there how are you push just IV by Rd hi TX cu
            </div>
        </section>
    </body>
</html>

如您所見,第二個 div 最長。其他 div 應該等於第二個 div。 另外,我不需要固定高度。

P粉207969787
P粉207969787

全部回覆(2)
P粉790819727

您可以使用 Flex 佈局。

section{
  width: 300px;
  background: lightblue;
  overflow: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
div{
  display: inline-block ;
  max-width: 150px;
  background: lightgreen;
  margin: 5px;
  white-space: normal;
  height: 100%;
}
P粉403821740

divs 上設定 min-width 並使其父級 flex 不能被包裹。

section {
  display: flex; /* new */
  flex-wrap: nowrap; /* new */
  width: 300px;
  background: lightblue;
  overflow: auto;
}

div {
  min-width: 150px; /* new */
  background: lightgreen;
  margin: 5px;
}
hi there how are you push just IV by Rd hi TX cu
hi there how are you push just IV by Rd hi TX cu jdi HD so of fr edg of Dr edg KB hi
hi there how are you push just IV by Rd hi TX cu
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板