html - 彼此相邻的div的行为

Question

我有一些 div 的行为不像我希望的那样。

<div class="list-product-with-border">
    <div style="width:80px; display:inline-block;">img</div>
    <div style="display:inline-block;"><b>Productname</b></div>
    <div style="float:right; width:80px;">
        <div>
            <button id="editBtn">Edit</button>
        </div>
        <div>
            <button id="removeBtn">Remove</button>
        </div>
    </div>
</div>

JSFiddle link

这里有两个问题:

1. 带边框的 div 不够高:“删除”按钮在带边框的 div 中不可见
2. 当“产品名称”为 longer 时，按钮呈现在带有产品名称的 div 下。发生这种情况时，我希望产品名称可以多行显示。三个 div 应始终相邻。

第一个和最后一个 div 有固定的宽度，中间的 div(产品名称)应该随着边框 div 的大小拉伸(stretch)

Answer 1

我个人会为此使用表格。表的每一行都是一个元素，并且有一列图像、一列名称和一列操作。这与用于发票的表格有什么不同吗？

我不能完全得到你想要的效果，但可以进行改进: float 元素应该出现在围绕它的元素之前 - 所以在这种情况下，它应该是list-product-with-border 容器中的第一件事。此外，您应该在容器的末尾有一个带有 clear:both 的元素，或者将容器设置为具有 overflow:hidden 以强制 float 元素位于内部.