3

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

我知道你不能用 CSS 做数学，所以我们不能只做类似的事情width: 33% - 100px;（如果你可以的话，那就太棒了）。我可以用 JavaScript 来确定它，但如果可能的话，我会尽量避免使用 JS 来完成这项任务。我宁愿看看是否有人可以提出更好的设计，而我不必这样做。

请参阅我在此小提琴上的示例。

这是我的 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 解决方案，这样当用户调整页面大小时，它会自动调整宽度（无需调用 JSresize事件侦听器），然后我的所有样式都会保留在一个地方，降低了复杂性。

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

4

3 回答 3

2

你在找这个吗？

演示

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>
于 2013-05-17T06:12:05.850 回答
0

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

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

唯一的缺点是，如果描述长于图像的高度，它不会流过图像下方，而是会一直流到一边。您可以通过完全删除边距并改为制作p display: inline.

于 2013-05-17T03:56:18.913 回答
0

你可以用 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 */

你可以乘，除，做任何你需要做的事情。David Walsh 提供了更多示例：http ://davidwalsh.name/css-calc 。您还可以查看哪些浏览器专门支持它：http ://caniuse.com/calc 。Opera 是唯一不支持它的现代浏览器，但它正在开发中......

于 2013-05-17T04:22:42.563 回答