Question

我有一个酒吧分为两部分，一部分包含文字，第二部分是某种面包屑。这两个元素必须是内联的。

诀窍是左边的div需要有灵活的内容，而右边的div应该左边调整到左边：

----------------------------------------------------------------------------------
|long text long text long text long text| <...breadcrumb navigation...>          |
----------------------------------------------------------------------------------

当屏幕缩小到，例如700px宽度时，左边的div应该比说条的30％。如果文本很长，则应该使用overflow：hidden：

进行修剪

-------------------------------------------------------
|long text long text...| <...breadcrumb navigation...>|
-------------------------------------------------------

如果文字很短，它应该是这样的：

----------------------------------------------------------------------------------
|short text| <...breadcrumb navigation...>                                       |
----------------------------------------------------------------------------------

在屏幕上调整大小不需要30％宽度：

-------------------------------------------------------
|short text| <...breadcrumb navigation...>            |
-------------------------------------------------------

我尝试了几种方法，包括display:table-cell，但结果是：

----------------------------------------------------------------------------------
|short text                             | <...breadcrumb navigation...>          |
----------------------------------------------------------------------------------

最后一个几乎工作的是float: left，但在这种情况下溢出：隐藏不起作用，文本要么推动整个布局oustise窗口屏幕，要么跳到下一行。

任何人都知道如何以最简单的方式解决这个问题，最好不用js？感谢

Answer 1

向左浮动左侧div，设置最大宽度，并将其白色空间设置为nowrap。

.left, .right { overflow:hidden; white-space:nowrap; }
.left { max-width:30%; float:left; background:green; }
.right { background:red; }

<div class="left">asdf asdfasdf asdfasdf asdfasdf asdfasdf asdfsadfa asdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdfas as</div>
<div class="right">asdfasfasdfasdfsafdsadf</div>

如何使内联2个div，宽度取决于内容

1 个答案: