html - 仅使用 CSS 根据百分比确定宽度

Question

我有三列(divs 向左浮动)，每列的宽度为 30% 加上 3% 的内边距。每列包含一个 100 像素宽的图像。在每张图片旁边，我想在旁边放一个标题/描述，这将占用该列中的其余空间。

我知道您不能在 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>

以及相关的 CSS:

.column3 {
    float: left;
    width: 30%;
    height: 100px;
    padding: 0 1.5%;
}

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

.column3 > div > p {
    display: inline-block;
}

.item img {
    float: left;
    width: 100px;
    height: 100px;
}

所以我需要弄清楚如何设置内部 div 的宽度，以便它占用剩余的空间。我知道我可以用 JS 做到这一点，但我真的更喜欢 CSS 解决方案，这样当用户调整页面大小时，它会自动调整宽度(无需调用 JS resize 事件监听器)和然后我所有的样式都将保存在一个地方，从而降低了复杂性。

这些代码都不是一成不变的，所以如果您能提出更好的 HTML/CSS 结构，那将是一个完全可以接受的解决方案。

Answer 1

你在找这个吗？

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>