Question

我目前有两个图像在内联显示（到目前为止一直很好）。我有3行不同的文字，我也想和这些图像一起排成一行。所以它将是：image-＆gt; image-＆gt;列表中3个不同的文本/链接行。

所有这些都需要适合不可见的宽矩形。到目前为止，这两个图像的大小和高度相同，所以如果我能够得到3条线来适应它们的高度，它就能很好地显示出来。

我想要显示的（3）行（来自下面的代码）是：“标题”，“已提交”，“分享”的类。

html, body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}
#logobar {
    background: rgb(206, 211, 255);
}
#logobar ul {
    list-style-type: none;
    margin: 40;
    padding: 40;
}
#logobar li {
    display: inline;
    padding: 20;
    font-size: 52;
    font-family: Comic sans MS;
}
.box {
    margin-left: 50px;
    width: 650px;
    height: 80px;
    display: inline-block;
}
.box .headline {
    font-size: 18px;
    color: black;
    list-style-type: none;
}

我的HTML代码如下：

<div id="logobar">
    <ul>
        <li>Breaditt: Bread News Aggregator</li>
        <li>
            <img src="img/logo.jpg" alt="breaditt cat" width="150" height="100">
        </li>
    </ul>
</div>
<div id="breadnews">
    <div class="box">
        <img src="img/counter.png" alt=counter width="75" height="75" />
        <img src="img/breadcat.jpg" alt=article-logo width="75" height="75" />
        <div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> 
        </div>
        <div class="submitted">
            <h>submitted 2 days ago by Alex Doggrowski</h>
        </div>
        <div class="share">
            <h>14,400 Comments. Share Save hide report</h>
        </div>
    </div>
</div>

Answer 1

.box img {
    float: left;
    margin-right: 10px;
}
.box {
    clear:both;
}

http://jsfiddle.net/samliew/uUcL6/

Answer 2

您可以使用显示属性。

实施例： // CSS

img{
    display:inline-block; vertical-align:top;
    height:100px; width:100px;
}

// HTML

<div>
   <img src="1.jpg" alt="image1"/>
   <img src="2.jpg" alt="image2"/>
</div>

如何以2个图像显示内联列表

2 个答案: