如何放置三个不同宽度的浮动div？

Question

看下一张图片。我画了三个矩形（黑色、红色和黄色），每个都有不同的宽度：

第一列：33% Segund列：剩余宽度（？）第三列：15px;

都是浮动的。我的第一次尝试是放置前两列，但没什么大不了的（将 66% 放在第二列），但是当我引入第三列时，我遇到了麻烦。我不确定我可以使用什么方法来处理这些宽度。

这是我创建的DOM：

<article class="cart-item">
    <div class="left">
        <img src="images/item1.jpg"></img>
    </div>

    <div class="center">
        <h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
        <span class="description">Shipping 3-day with UPS</span>
        <span class="description">Color: Gray</span>
        <span class="description">Size: 28.5</span>
        <span class="price">.00</span>
    </div>

    <div class="right">
    </div>
</article>

我有一些CSS：

.left {
    float: left;
    width: 33.33%;
    padding-left: 15px;
}

.center{
    float: left;
    width: ?;
    padding-left: 15px;
    padding-right: 15px;
}

.right {
    float: left;
    width: 15px;
    background-color: #CCCCCC;;
}

Answer 1

尝试

div.center { width: calc(66% - 45px); }

45px = 30px padding + 15px 右列宽度

Answer 2

First column: 33% Second column: Remaining width (?) Third column: 15px;

All of them are float.

如果您受困于 float 并且无法更改标记，那么简单的 calc 就可以达到您的目的。但是，这会引入其他问题。您将需要指定容器的高度，否则让图像对齐将成为您的噩梦。特别是最后一个

它将看起来像这样：

.cart-item {
    width: 320px; height: 120px; overflow: hidden;
    border: 1px solid #ccc; 
}
.cart-item > div { float: left; height: 100%; }
.cart-item .left { width: 33%; border: 1px solid #333; }
.cart-item .right { width: 15px; border: 1px solid #ee3;  }
.cart-item .center { 
    width: calc(100% - 33% - 15px); 
    border: 1px solid #e66;
}

演示 Fiddle 1: http://jsfiddle.net/abhitalks/3sz149f0/

演示代码段 1：

.cart-item, .cart-item * { box-sizing: border-box; }
.cart-item {
    width: 320px; height: 120px; overflow: hidden;
    border: 1px solid #ccc; 
}
.cart-item > div { float: left; height: 100%; }
.cart-item .left { width: 33%; border: 1px solid #333; }
.cart-item .right { width: 15px; border: 1px solid #ee3;  }
.cart-item .center { 
    width: calc(100% - 33% - 15px); 
    border: 1px solid #e66;
}

<article class="cart-item">
    <div class="left">
        <img src="//placehold.it/64x64/66c"></img>
    </div>

    <div class="center">
        <h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
        <span class="description">Shipping 3-day with UPS</span>
        <span class="description">Color: Gray</span>
        <span class="description">Size: 28.5</span>
        <span class="price">.00</span>
    </div>

    <div class="right">
    </div>
</article>

如果可以更改标记和样式，则不要使用 float。只需使用 table 布局，然后您就可以非常轻松地安排内容，而无需依赖容器上的显式高度。

它将看起来像这样：

.cart-item {
    display: table;
    width: 320px; overflow: hidden;
    border: 1px solid #ccc; 
}
.cart-item > div { 
    display: table-cell; vertical-align: middle; text-align: center; 
}
.cart-item .left { width: 33%; border: 1px solid #333; }
.cart-item .right { width: 15px; border: 1px solid #ee3; }
.cart-item .center { 
    width: calc(100% - 33% - 15px); 
    border: 1px solid #e66; text-align: left; 
}

演示 Fiddle 2: http://jsfiddle.net/abhitalks/d1qdyxrf/

演示代码段 2：

.cart-item, .cart-item * { box-sizing: border-box; }
.cart-item {
    display: table;
    width: 320px; overflow: hidden;
    border: 1px solid #ccc; 
}
.cart-item > div { 
    display: table-cell; vertical-align: middle; text-align: center; 
}
.cart-item .left { width: 33%; border: 1px solid #333; }
.cart-item .right { width: 15px; border: 1px solid #ee3; }
.cart-item .center { 
    width: calc(100% - 33% - 15px); 
    border: 1px solid #e66; text-align: left; 
}

<article class="cart-item">
    <div class="left">
        <img src="//placehold.it/64x64/66c"></img>
    </div>

    <div class="center">
        <h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
        <span class="description">Shipping 3-day with UPS</span>
        <span class="description">Color: Gray</span>
        <span class="description">Size: 28.5</span>
        <span class="price">.00</span>
    </div>

    <div class="right">
        <img src="//placehold.it/6x32/666"></img>
    </div>
</article>

如何放置三个不同宽度的浮动div？

How to put three floated div with different widths?

html

css

css-float