当我水平滚动时,如何使块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;
}
https://jsfiddle.net/tombrito/hc9b8s06/1/
发生这种情况是因为块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>