[英]CSS for responsive container filling remaining space
考虑这个 HTML:
body { background: #dddddd; padding: 12px; font-family: monospace; } .app { background: white; border: solid 1px #cccccc; padding: 12px; } .pretext { vertical-align: top; } .content { display: inline-block; width: 500px; }
<div class="app"> <div class="section"> <span class="pretext">--</span> <span class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec. </span> <br /> <span class="pretext">----</span> <span class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec. </span> <br /> </div> <div class="section"> <span class="pretext">------</span> <span class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec. </span> <br /> <span class="pretext">--------</span> <span class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec. </span> <br /> </div> </div>
您可以看到.pretext
和.content
一起位于一条水平线上。 这是我正在寻找的演示文稿,但我需要它具有响应性,而不是给.content
设置宽度。
我正在尝试设置样式,以便.pretext
和.content
元素填充单个水平线上的宽度。 非常重要的一点是.content
的文本会环绕到它的文本开始的位置,到目前为止,这是通过display: inline-block
。
我知道我可以通过在.content
上设置特定宽度来实现这一点,但是由于.pretext
的文本和宽度可能会发生变化,我不确定如何设置它的样式,以便它能够响应页面宽度并响应.pretext
的宽度。
我知道我可以计算元素的大小并通过 JavaScript 应用样式,但这并不理想,因为 HTML 结构可能会发生变化,从而使维护变得更加困难。 如果可能的话,纯 CSS 会是最好的。
.pretext
有随机数量的连字符.content
中的所有文本都是随机的并且是用户生成的.content
一个 CSS 声明您可以使用flex
来做到这一点。 只需将元素包装在外部包装器中:
* { box-sizing: border-box; } body { background: #dddddd; padding: 12px; font-family: monospace; } .app { background: white; border: solid 1px #cccccc; padding: 12px; } .content-wrap { display: flex; flex-direction: row; flex-wrap: nowrap; margin-bottom: 10px; } .pretext { flex: 1 0 auto; } .content { flex: 0 1 auto; padding-left: 10px; }
<div class="app"> <div class="section"> <div class="content-wrap"> <span class="pretext">--</span> <span class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec. </span> </div> <div class="content-wrap"> <span class="pretext">----</span> <span class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec. </span> </div> </div> <div class="section"> <div class="content-wrap"> <span class="pretext">------</span> <span class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec. </span> </div> <div class="content-wrap"> <span class="pretext">--------</span> <span class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lacus, tincidunt ultricies ullamcorper sit amet, facilisis vel lectus. Nam fermentum quam blandit sodales vehicula. Praesent tempus velit ut augue viverra lobortis. Duis non varius ante, eu molestie erat. Phasellus tempus tincidunt lorem, a ornare nunc tincidunt vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ex ex, sagittis non odio et, tempus tristique urna. Proin risus velit, placerat sed tempor ac, rutrum at lorem. Etiam sodales malesuada orci, in feugiat est porta nec. </span> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.