如何创建自动扩展块

本文介绍了如何创建自动扩展块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我需要创建一个单列的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 classSet float:left on .left and float:right on .rightPlace your .left and .right divs within your center div before its content <div class="container"> <div class="center"> <div class="left">Left</div> <div class="right">RightRightRight</div> Center center center center center center center </div> 这篇关于如何创建自动扩展块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！