如何创建自动扩展块 [英] 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屋！