Question

<article id="l1">
    <img class="active_pic" id="a1" src="img/load.gif"/>
</article>
<article id="l2">
    <img class="active_pic" id="a2" src="img/load.gif"/>
</article>
<article id="l3">
    <img class="active_pic" id="a3" src="img/load.gif"/>
</article>

所以这就是我想让<article>并排，相互接触的HTML。这就是我在CSS中所做的：

article{
   height:90%;
   margin:0;
   padding:0;
   border:0;
   text-align:left;
   display:inline-block;
}

问题，它们没有相互接触，它们保持一致，只有当我改为显示：内联，但我想显示：内联块，但是当我这样做时它占用100％宽度而不是宽度它包含的图片。

我知道这是一个蹩脚的问题，但我尝试了所有我知道的事情。

编辑：这是我正在尝试做的一个链接：

http://kozkincsprogram.hu/clooud/galery.html

当它加载时选择左图，这是'彩色'以使我的问题出现

Answer 1

试

http://jsfiddle.net/PHhdm/

article{
   height:90%;
   margin:0;
   padding:0;
   border:0;
   text-align:left;
float:left;
}
article > img{
    border:1px solid red;
    width:200px;
    height:200px;
   display:inline-block;

}

Answer 2

您是否尝试过使用花车？

article{
   height:90%;
   margin:0;
   padding:0;
   border:0;
   text-align:left;
   float:left;
    border:1px solid red;
}

查看小提琴：http://jsfiddle.net/WEfPj/

Answer 3

您是否尝试过使用花车

article { float: left; width: //add the width here i.e. 100px; 20%? }

Answer 4

正如其他答案所述，您可能会在float: left元素上寻找article，但您可能还想在图片上设置display: block以删除额外内容article和img元素之间存在的空格。

article {
    height:90%;
    margin:0;
    padding:0;
    border:0;
    text-align:left;
    float: left;
}

article > img { display: block; }

Answer 5

如果你没有告诉他们他们有多少空间，他们为什么会占用小于页面的整个宽度呢？

如果您想要并排放置3个元素，请使用大约30％的宽度并使用边距使它们均匀。

底线是您需要width。

您可能还会发现CSS3的{{1}}非常有用。 calc()＆amp; min-width在这里也很有用。

为什么这个定位显示不起作用？

5 个答案: