宽度100％定位

Question

我无法解释为什么div类pic-container不会与其他3对齐到页面顶部。

每个儿童div的宽度为25％。

我有一种感觉我错过了一些明显的东西......

此处示例： http://tinkerbin.com/NS7vagaq

Answer 1

集

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

到display: inline;

所以它是：

.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。

Answer 2

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

如果你将第四个同心形也移动到与前三个相同的div容器中，它们会排成一列。

Answer 3

因为div是块级元素。将其更改为内联和瞧。

div {
  display:inline;
}

http://tinkerbin.com/rz9WlaIg

Answer 4

将CSS更改为：

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

小提琴：http://tinkerbin.com/DH6nLkQO

Answer 5

你也可以漂浮它。

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