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

这里有两个问题：

有界的div不够高：'删除'按钮在边界div中看不到
当“产品名称”为longer时，按钮将在带有产品名称的div下呈现。当发生这种情况时，我希望产品名称超过多行。这三个div应该总是紧挨着彼此。

第一个和最后一个div有一个固定的宽度，中间的div（产品名称）应该以带边的div的大小拉伸

Answer 1

就我个人而言，我会使用一张桌子。表的每一行都是一个项目，您有一列图像，一列名称和一列操作。这与用于发票的表格有什么不同吗？

我无法得到你想要的效果，但是可以做出改进：浮动元素应该之前要绕过它的元素 - 所以在这种情况下，它应该是list-product-with-border容器中的第一件事。此外，您应该在容器的末尾有一个clear:both的元素，或者将容器设置为overflow:hidden以强制浮动的元素在内部。

Answer 2

你想要这样吗？

这里是Fiddle

<style>
.list-product-with-border {
    padding:3px;
    width:60%;
    border:1px solid black;
    overflow: hidden;
    height: auto;
}
</style>

现在是HTML

    <div class="list-product-with-border">
    <div style="width:80px; display:inline-block;">img</div>
    <div style="display:inline-block; overflow:hidden; height: auto;"><b>Productname Is the right choice baby, as you can see its just done</b></div>
    <div style="float:right; width:180px;margin-top: 10px;">
        <div style="float: left;">
            <button id="editBtn">Edit</button>
        </div>
        <div style="float: left;">
            <button id="removeBtn">Remove</button>
        </div>
    </div>
</div>
</div>

Answer 3

您必须使用display：table-cell而不是display：table-column并删除float：left for .divCell。

并添加此样式：

.headRow{
    display:table-row;
}

div的行为彼此相邻

3 个答案: