Question

我有一些div设置如下 http://jsfiddle.net/hwffdodx/10/

<div>
<div style="display:inline"> [Button A] </div>
<div style="display:inline">Some looooooooooooooooooooooooong text hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
</div>

基本上，我想在同一行上有两个div，第一个div我会用来显示一个图标，第二个div我希望它在窗口调整大小时自行包装。

我尝试使用＆＃34; white-space：nowrap＆＃34;，但是当窗口调整大小时它会在底部显示一个滚动条，这不是我想要的。

我还尝试设置＆＃34;宽度＆＃34;到了第二个div，但是我希望我能找到一个更好的解决方案，因为我的html中有一个这种风格的块，它们都有不同的父左边填充，所以很难预设一个宽度。

现在我使用＆＃34;显示：内联＆＃34;使东西显示在同一条线上。但现在缩进不再尊重包含按钮的第一个div。

有什么想法解决这个问题吗？

谢谢！

更新

我发现了一个解决方案（＆＃34;溢出：隐藏＆＃34;像魔术一样......）：

<div style="display:inline-block">
    <div style="float:left"> [Button A] </div>
    <div style="overflow:hidden">Some looooooooooooooooooooooooong text eeeeeeereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
</div>

现在，两个div总是在同一行，调整大小时不会显示任何滚动条。并且，缩进工作完美（比较只使用＆＃34;内联所有div）

Answer 1

我不确定这是你想要实现的目标，但它可能有所帮助：

.icon {
    display: inline;
    max-width: 20%;
}
.content {
    float: right;
    max-width: 80%;
}

<div>
    <div class="icon">[Button A]</div>
    <div class="content">Some looooooooooooooooooooooooong text hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
</div>

Ps：以整页模式运行代码段或查看updated Fiddle

如何防止两个div包装，也没有水平滚动条？

1 个答案: