如何创建自动扩展块 [英] How to Create Automatically Expanding Block
问题描述
我需要创建一个单列的3列布局。左和右列应该显示一个单词而不截断(它们应该展开和收缩以适应单词)。中心列应显示可能冗长的字符串,被截断以适合两列之间。
I need to create a one-lined 3-column layout. The left and right columns should each display one word without truncation (they should expand and contract to fit the word). The center column should display a potentially lengthy string, truncated to fit between the two columns.
这里有一点HTML来表达这个想法:
Here's a bit of HTML to convey the idea:
<div class="container">
<div class="left">Left</div>
<div class="center">Center center center center center center center</div>
<div class="right">Right</div>
</div>
和一些相应的CSS:
.container {
whitespace: nowrap;
}
.left {
display: inline-block;
}
.center {
display: inline-block;
overflow: hidden;
}
.right {
display: inline-block;
}
下一步是以某种方式将center元素设置为自动展开或收缩填充左和右元素之间的空间。
The next step is to somehow set the center element to automatically expand or contract to fill the space between the left and right elements.
像center.width = container.width - left.width - right.width
Something like center.width = container.width - left.width - right.width
有什么想法吗?感谢
EDIT:已解决对 ianhirschfeld 的响应。
HTML:
<div class="container">
<div class="left">Left</div>
<div class="right">RightRightRight</div>
<div class="center">Center center center center center center center</div>
</div>
CSS:
.container {
white-space: nowrap;
overflow: hidden;
}
.left {
float: left;
}
.center {
overflow: hidden;
}
.right {
float: right;
}
推荐答案
- 设置容器类的高度
- 设置float:left on .left,float:right on .right
- 将.left和.right div放在中心div之前
- Set the height on the container class
- Set float:left on .left and float:right on .right
- Place your .left and .right divs within your center div before its content
.container {
height:30px;
overflow:hidden;
}
.left {
display:inline-block;
background:#b9ff67;
float:left; < br>
}
.center {
width:100%;
display:inline-block;
overfow :hidden;
background:#9ac0ff;
}
.right {
display:inline-block;
background:#ffc8c8;
float:right;
}
.container {
height: 30px;
overflow: hidden;
}
.left {
display: inline-block;
background: #b9ff67;
float: left;
}
.center {
width: 100%;
display: inline-block;
overfow: hidden;
background: #9ac0ff;
}
.right {
display: inline-block;
background: #ffc8c8;
float: right;
}
<div class="container">
<div class="center">
<div class="left">Left</div>
<div class="right">RightRightRight</div>
Center center center center center center center
</div>
这篇关于如何创建自动扩展块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!