Question

我需要创建一个单行的2列布局。第一列应显示一个可能很长的字符串，截断它以使其适合单行布局。与How to Create Automatically Expanding Block类似，我做了以下内容：

HTML：

<div class="container">
  <div class="left">Lengthy string</div>
  <div class="right">Short</div>
</div>

CSS：

.container {
  white-space: nowrap;
  overflow: hidden;
}

.left {
  overflow: hidden;
}

.right {
  float: right;
}

与此解决方案相比，我希望右列不在最右边，而是直接在左列的内容后面。

任何想法如何做到这一点？

编辑：

用“直接在后面”澄清我的意思的例子：

'冗长字符串'可以是在线商店中的类别，“短”可以是此类别中的许多可用商品。由于类别名称+数字可能比其容器的宽度宽，因此可能需要截断类别名称，例如。

<div class="container">
  <div class="left">Electronic equipment for consumer</div>
  <div class="right">(599)</div>
</div>

应该呈现为

Eletronic equipment... (599)

直接在后面我的意思是，对于简短的类别名称，比如说“书籍”，这应该看起来像

Books (29)

而不喜欢

Books             (29)

Answer 1

我不是肯定的我明白你的意思是“直接落后”，但我认为这可能是你所追求的：

.left {
   overflow: hidden;
   display: inline;
 }

 .right {
   float: right;
   display: inline;
 }

使<div>内联将消除对花车的需求，通常会让您的生活更轻松。

Answer 2

您必须指定固定宽度，或者，如果您的浏览器支持，则必须指定最大宽度才能生效。

您现在定义它的方式，浏览器可以自由地将左侧元素设置为它想要的宽度。

你还应该考虑在左边浮动left而不是浮动right。或者对{both}使用display: inline并且不要浮动任何东西。

Answer 3

以下CSS创建一行2列布局

#wrapper { display: table }
#wrapper > div { display: table-cell; }
#wrapper > div:first-child { min-width: 200px; /*Using min-width allows expantion */ }
#wrapper > div:last-child { min-width: 200px; }
#wrapper > div p { white-space:nowrap; } //One line text

<div id="wrapper">
  <div><!-- Left menu? --></div>
  <div><p>very long text very long text etc..</p></div>
</div>

如何创建单行布局，其中长字符串被截断为“内联”？

3 个答案: