Question

我有三列（div左浮），每列有30％的宽度加上3％的填充。每列包含100px宽的图像。在每个图像旁边，我想在其旁边放置一个标题/描述，这将占用该列中剩余的空间。

我知道你不能在CSS中做数学，所以我们不能只做像width: 33% - 100px;这样的事情（如果你能做的话会很棒）。我可以用JavaScript来确定它，但是我试图避免使用JS来完成这项任务，如果可能的话。我宁愿看看是否有人能想出一个更好的设计，我不必这样做。

请参阅this fiddle上的示例。

这是我的HTML：

<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="images/items/item1.jpg" />
    <div>
        <b>Item 1</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="images/items/item2.jpg" />
    <div>
        <b>Item 2</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item clearfix">
    <img src="images/items/item3.jpg" />
    <div>
        <b>Item 3</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>

Demo

CSS：

.column3 {
    float: left;
    width: 30%;
    height: 100px;
    position:relative;
    padding: 0 1.5%;
}
.column3 > div {
    display:inline-block;
    border: 1px solid #0ff;
    margin-left:100px;
    padding-left:-100px;
}
.column3 > div > p {
    display: inline-block;
}
.item img {
    width: 100px;
    height: 100px;
    position: absolute;
    top:0;
    left:0;
}
/* clearfix */
 .clearfix:before, .clearfix:after {
    content:"";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
}
/* END clearfix */

HTML：

<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="http://dummyimage.com/100x100/000/fff" />
    <div> <b>Item 1</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="http://dummyimage.com/100x100/000/fff" />
    <div> <b>Item 2</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item clearfix">
    <img src="http://dummyimage.com/100x100/000/fff" />
    <div> <b>Item 3</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>

Answer 2

移除内部div上的浮动并使边距足够大以使其适合图像：

.column3 > div {
    margin-left: 105px;
}

唯一的缺点是，如果描述长于图像的高度，它将不会在图像下方流过，但会保持在侧面。你可以通过完全删除边距而不是p display: inline来实现这一点。

Answer 3

你可以用CSS3做数学。

width: calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */

或

width: calc(100% - 100px); /* width 100% minus image width */

当然，请使用供应商前缀：

width: -webkit-calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */
width: -moz-calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */
width: -o-calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */
width: -ms-calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */
width: calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */

你可以繁殖，分裂，无论你需要做什么。大卫沃尔什给出了一些例子：http://davidwalsh.name/css-calc。您还可以查看哪些浏览器专门支持它：http://caniuse.com/calc。 Opera是唯一一款不支持它的现代浏览器，但它就是它的方式......

仅使用CSS确定基于百分比的宽度

3 个答案:

Demo