0 
<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>'s 并排，相互接触的 HTML。这是我在 CSS 中所做的：

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

问题，它们不会相互接触，它们保持一致，只有当我更改为 display:inline 时，但我想要 display:inline-block，但是当我这样做时，它会占用 100% 的宽度而不是图片的宽度包含。

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

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

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

当它加载时选择左图，它是“彩色”的，让我的问题出现

4

5 回答 5

0

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

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

底线是你需要一个width.

您可能还会发现CSS3'calc()非常有用。min-width&max-width在这里也很有用。

于 2013-07-08T13:27:43.660 回答
0

你试过用花车吗

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

于 2013-07-08T13:04:39.557 回答
0

尝试

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;

}
于 2013-07-08T13:03:35.697 回答
0

您是否尝试过使用浮点数？

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

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

于 2013-07-08T13:03:55.700 回答
0

正如其他答案中提到的，您可能正在寻找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; }
于 2013-07-08T13:12:19.287 回答