0

画像があり、横にテキスト、画像、テキストが続きます。テキストを高くしたいのですが、margin-topスパンでは機能しません。

これが私が持っているコードです（そして{}括弧内のビットを無視してください、それらはtumblrカスタムテーマで使用するためのものです）：

<div class="activities">
    <span class="activity"><img src="{image:First Activity Image}"/>
        <span class="activityname">{text:First Activity Name}</span>
    </span>
    <span class="activity"><img src="{image:Second Activity Image}"/>
        <span class="activityname">{text:Second Activity Name}<span>
    </span>
</div>

全体をに変更しますが、それによってそれぞれが新しい行に表示されます。

4

2 に答える 2

1

おっと。CSSはHTMLに従う必要があり、その逆ではありません。まず、意味的にマークアップします。リストがあるようですので、ul：を使用しましょう。

<ul class="activities">
    <li>
        <img src="...">
        <p>...</p>
    </li>
    ...
</ul>

次に、リストアイテムを左側にフロートできます。

.activities {
    /* makes sure the container expands to fit the floated material */
    overflow: hidden;
}
.activities > li {
    float: left;
    width: 300px;  /* or something; you might want to change this number */
}

画像を左にフロートさせることもできます。

.activities > li {
    overflow: hidden;  /* again, expand the container */
}
.activities > li > img {
    float: left;
}

次に、テキストを中央に揃えます。

.activities > li > p {
    text-align: center;
}

それを試してみてください。

于 2012-10-13T23:30:21.423 に答える
0

の使用ul liはより良いオプションです。好きなように簡単にコンテンツを配置できます。

内側のすべてのコンテンツに与えfloat:leftてください。その後、値を簡単に試すことができmarginます。

于 2012-10-13T23:40:36.400 に答える