Question

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

第一栏：33％ Sendnd列：剩余宽度（？）第三栏：15px;

所有这些都是浮动的。我的第一次尝试是放在前两列，但不是一个大问题（在第二列中增加66％），但是当我介绍第三列时，我遇到了麻烦。我不确定用什么方法来处理这些宽度。

这是我创建的DOM：

.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;;
}

我拥有的一些CSS：

SELECT CAST(COUNT(*) AS DECIMAL) / COUNT(DISTINCT column5)
FROM table1;

Answer 1

第一栏：33％第二栏：剩余宽度（？）第三栏：   15像素;

所有这些都是浮动的。

如果您遇到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;
}

演示小提琴1：http://jsfiddle.net/abhitalks/3sz149f0/

Demo Snippet 1：

＆＃13;

.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;
}

＆＃13;

<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">$60.00</span>
    </div>

    <div class="right">
    </div>
</article>

＆＃13;

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

看起来像这样：

.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; 
}

演示小提琴2：http://jsfiddle.net/abhitalks/d1qdyxrf/

Demo Snippet 2：

＆＃13;

.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; 
}

＆＃13;

<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">$60.00</span>
    </div>

    <div class="right">
        <img src="//placehold.it/6x32/666"></img>
    </div>
</article>

＆＃13;

Answer 2

尝试

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

45px = 30px填充+ 15px右列宽度

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

2 个答案: