如何将两个动态div保持在同一行上，并在右侧强制换行

Question

我需要做的是将两个动态div保持在同一水平线上，并强制最右边的div对文本进行自动换行，而不是移至下一行。

我已经尝试了许多方法，例如这个类似但不完全相同的问题中的方法：

保持div处于同一行

这是我想要的实验解决方案的简化版本（例如使用表格单元格，在正确的div上浮动等）：

<div class='wrapper'>
<div class='images'>
    images 
</div>
<div class='text'>
    long text long text long text long text long text  long text long text long text long text long text
</div>
</div>

.images {
    float:left;
    border:1px solid black;
    height: 200px;
}

.text {
    float:left;
    border:1px solid black;
    position: relative;
}

.wrapper {
}

在这段代码中，即使Javascript未加载，我也需要对齐才能正确进行，因此不能选择使用jQuery进行修复。 两个div都是动态的，它们可以基于用户交互来更改宽度。

如果第二个div中的文本不太长，我可以使两个div对齐，但是如果我将浏览器窗口缩小到太紧，则第二个div会跳到第二行。

我希望文本保持左对齐，因此第二个div文本应与第一个div的右侧对齐。

div的高度也不相同，高度也不是固定的，它可能非常取决于页面的内容。

显然，一种解决方案是使用table标记，但是我希望避免这种情况，因为表通常不是最佳实践。

更新：为了完整起见，这是一个小玩意儿，它与我的实际页面格式非常接近-左侧的图像，右侧的长文本以及该文本下方的一堆按钮。 https://jsfiddle.net/yyt0tkLr/目前，我正在尝试使按钮堆栈显​​示在单独的行上，而无需使用br标签来做。

Answer 1

有什么理由不能按照自然意图使用浮点数？

小提琴演示

 .images { float:left; border:1px solid black; height: 200px; } .text { border:1px solid black; overflow: hidden; } 

 <div class='wrapper'> <div class='text'> <div class='images'>images</div> long text long text long text long text long text long text long text long text long text long text</div> </div> 

Answer 2

您是否尝试将display:inline用于正确的div？

小提琴： http ： //jsfiddle.net/fe6yp0m1/

Answer 3

我认为最好的正确方法是在使用float元素后使用clear，否则您的包装器将无用。以下是我的操作方法，请检查

.images {
    border:1px solid black;
    height: 200px;
    float:left;
}
.clear{
    clear:both;
}
.text {
    display:inline;    
    border:1px solid black;
}

.wrapper {
   border:1px solid black;
}

http://jsfiddle.net/Siddharth_Pandey/6vb4bkng/

Answer 4

如果给div一个width属性，那么所有这些都将组合在一起。 如果没有它，divs将发生碰撞，而您将在另一层下面缠绕。

<div class='wrapper'>
<div class='images'>
    images 
</div>
<div class='text'>
    long text long text long text long text long text  long text long text long text long text long text long text long text long text long text long text  long text long text long text long text long text long text long text long text long text long text  long text long text long text long text long text
</div>
</div>

.images {
    float:left;
    border:1px solid black;
    height: 200px;
    width:20%;
}

.text {
    float:left;
    border:1px solid black;
    position: relative;
    width:75%
}

.wrapper {
}

https://jsfiddle.net/Ls3bw80t/