1

我目前有两张图片一起在线显示（到目前为止还不错）。我有 3 行不同的文本，我也想与这些图像并排排列。所以它会是：图像->图像->列表中的 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>
4

2 回答 2

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

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

于 2013-04-25T02:04:12.623 回答
0

您可以使用显示属性。

示例：//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>
于 2013-04-25T13:55:40.850 回答