当我水平滚动时,如何使块B像块A一样填充宽度?
HTML:
<div id="main">
<div style="background-color:coral;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
<div style="background-color:lightblue;">B</div>
</div>
的CSS:
#main div {
display: inline-block; /*or block*/
min-width: 100%;
height: 50px;
}
答案 0 :(得分:5)
这是因为块A溢出父节点,块B仅与父节点一样宽。
相反,您应该扩展父级以包含块A.您可以使用
实现此目的#main {
display: inline-block; /* (at least) as wide as contents */
min-width: 100%; /* but grow to fill available space, if any */
}
#main {
display: inline-block;
min-width: 100%;
}
#main div {
display: inline-block; /*or block*/
min-width: 100%;
height: 50px;
}
<div id="main">
<div style="background-color:coral;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
<div style="background-color:lightblue;">B</div>
</div>