0

我需要创建一个单行 2 列布局。第一列应该显示一个可能很长的字符串，并被截断以适合单行布局。与如何创建自动扩展块类似，我做了以下操作：

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)
4

3 回答 3

1

我不肯定我理解你所说的“直接落后”是什么意思，但我认为这可能是你所追求的：

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

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

使<div>'s 内联将消除对浮点数的需求，通常会使您的生活更轻松。

于 2013-01-07T15:36:54.353 回答
0

您必须指定一个固定宽度，或者，如果您的浏览器支持，则为它工作的最大宽度。

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

您还应该考虑left在左侧浮动而不是浮动right。或者display: inline两者都使用，不要浮动任何东西。

于 2013-01-07T15:37:52.630 回答
0

下面的 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>
于 2013-01-07T15:50:16.147 回答