[英]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.