javascript - 用于填充剩余空间的响应式容器的 CSS
问题描述
考虑这个 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
and.content
元素在一条水平线上填充宽度。非常重要的一点是,文本会.content
换行到其文本开始的位置,到目前为止,这是通过display: inline-block
.
我知道我可以通过在 上设置特定宽度来实现这一点.content
,但是由于.pretext
' 的文本和宽度可能会发生变化,我不确定如何设置它的样式以使其响应页面宽度并响应.pretext
' 的宽度。
我知道我可以计算元素的大小并通过 JavaScript 应用样式,但这并不理想,因为 HTML 结构可能会发生变化,从而使维护变得更加困难。如果可能的话,纯 CSS 将是最好的。
- 假设
.pretext
里面有随机数量的连字符 - 假设这发生在浏览器运行时,并且里面的所有文本
.content
都是随机的并且是用户生成的 - 纯 CSS 优先
- 一个 CSS 声明
.content
适用于所有情况 - 如果需要,可以更改 HTML 的结构
解决方案
您可以使用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>
推荐阅读
- elasticsearch - 如何通过值字段获取不同的文档
- c# - Windows 应用程序打包项目的 Windows 存储错误
- reactjs - 如何将登录深度链接到 React SPA
- java - 读取一个巨大的 json 对象数组文件
- swift - 无法使用 google place api 获取预期数据
- python - python - 在实例级别动态覆盖方法并“更新”所有引用
- c++ - 如果 KEY 是 std::list 或 std::vector 而不是值,则 std::map 的默认行为是什么?
- mongodb - 警告:没有为数据库启用访问控制。对数据和配置的读写访问不受限制
- javascript - 将对象数组转换为表格的 HTML 标记
- ios - 快速创建年份字符串数组的方法崩溃