溢出容器与同样高的孩子-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

溢出容器与同样高的孩子

P粉207969787 2024-03-22 13:42:51

[CSS3讨论组]

556

我搜索了可用的问题，但没有找到解决方案。

我试图将水平溢出容器的所有元素的高度设置为等于最长元素的高度。

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

全部回复(2)

P粉7908197272024-03-23 09:37:00 2楼

您可以使用 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%;
}

赞 +0

添加回复

P粉4038217402024-03-23 00:24:25 1楼

在 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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>