Css 定位宽度为100%

我无法理解为什么div类pic容器不能与其他3个容器对齐到页面顶部

每个子div的宽度为25%

我有种感觉我错过了一些显而易见的事情

示例如下：

---

在您的示例中，DIV中的第四个identicon与其他三个分开。由于div是块级元素，第二个“pic container”div中的identicon将显示在其他div的下方

---

如果将第四个标识图标也移动到与前三个标识图标相同的div容器中，它们将对齐。

因为div是块级元素。把它改成内联，瞧

div {
  display:inline;
}

设置

.pic-container{
    font-size:0;
    }

显示：内联

因此：

.pic-container{
    font-size:0;
    display:inline;
    }

---

由于您已经更改了代码的结构，因此上述方法不再有效，请尝试以下方法：

<div class="pic_container">
    <img src="images/1.jpg">  
    <span class="viewer">  
        <img src="images/2.jpg">
        <img src="images/3.jpg">
    </span>
    <img src="images/4.jpg">
</div>

无需特殊CSS。

将CSS更改为：

.pic-container{
    font-size:0;
    display: inline;
}

---

小提琴：你也可以让它浮动

.pic-container img { margin:0; padding: 0; float:left; }

---

忽略字体大小为0的空白不好。你能解释一下为什么吗？@bengem这不是一个好的练习。抱歉，学究式的（尽可能多地学习）为什么是不好的练习？有什么替代方案？@bengem：如果我没记错的话，它在IE7和IE8中不起作用，并且可能会引入一些其他奇怪的问题。我将在某个时候找到堆栈溢出问题！：不管怎样，不幸的是，另一种选择就是不在它们之间加空格。它看起来可能不太好，但它更可靠。我已经对本地版本进行了更改，但仍然存在问题：您更改了代码的结构，因此它当然不起作用。为什么现在有两个单独的picu类容器div，然后在第一个容器中嵌套另一个div？你到底想达到什么目的？4张图片？4幅图片，中间两幅在某种容器内？我试着调整它，但失败了。是的，在容器中间有4个图像，中间有2个（一旦我弄清楚了，它将是一个滑块），你到底想要达到什么样的目标？4张图片？4张图片，中间的两个在某种容器里面？是的，4个图像，中间有2个在容器中（一旦我弄清楚了，它就会变成一个滑块）。