相关疑难解决方法(0)

鉴于此HTML和CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

结果,SPAN元件之间将存在4像素宽的空间.

演示: http ://jsfiddle.net/dGHFV/

我理解为什么会发生这种情况,而且我也知道我可以通过删除HTML源代码中SPAN元素之间的空白来摆脱那个空间,如下所示:

<p>
    <span> Foo </span><span> Bar </span>
</p>

但是,我希望CSS解决方案不要求HTML源代码被篡改.

我知道如何用JavaScript解决这个问题 - 通过从容器元素(段落)中删除文本节点,如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示: http ://jsfiddle.net/dGHFV/1/

但是这个问题可以单独用CSS解决吗？

我想有两列50%宽度的空间,并避免浮动.所以我想用display:inline-block.

当元素增加到99%宽度(例如50%,49%,http://jsfiddle.net/XCDsu/2/)时,它按预期工作.

当使用100%宽度(例如50%,50%,http://jsfiddle.net/XCDsu/3/)时,第二列会断开第二行.

这是为什么？

我有一个固定高度的div标签.大多数图像具有相同的高度和宽度.

我想对齐div底部的图像,以便它们排列整齐.这是我到目前为止:

<div id="randomContainer">
    <div id="imageContainer">
        <img src="1.png" alt=""/>
        <img src="2.png" alt=""/>
        <img src="3.png" alt=""/>
        <img src="4.png" alt=""/>
    </div>
    <div id="navigationContainer">
        <!-- navigation stuff -->
    </div>
</div>

CSS看起来像:

div#imageContainer {
    height: 160px;  
    vertical-align: bottom;
    display: table-cell;
}

我设法在与底部对齐图像display: table-cell和vertical-align: bottomCSS属性.

有没有更简洁的方法将div显示为表格单元格并对齐DIV标签底部的图像？