1

私は現在、インラインで次に一緒に表示されている2つの画像を持っています(これまでのところとても良いです)。これらの画像と並んで行こうとしている 3 行の異なるテキストがあります。イメージ -> イメージ -> リスト内の 3 行のテキスト/リンク。

これらはすべて、目に見えない幅の広い長方形に収まる必要があります。これまでのところ、2 つの画像は同じ高さと幅のサイズになっているので、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 に答える