0

Stackoverflow の周りでこれに関する多くのトピックを見てきましたが、この特定のケースでこれを行う方法をまだ見つけることができませんでした。

リストをカード形式で表示しようとしています。開発したテンプレートがあります。次のようになります。

プロトタイプ

ここに 3 枚のカードがあり、最初の 1 枚ではdivs作成すべきと思われる場所を表示しました

テキストを思いどおりに配置できません。Title最初の画像の上Descriptionと両方を右に揃えたいです。しかし、これまでのところ、私はどこにも行きませんでした。私JSFiddleはこれまでのところ、ここにあるものを持っています: http://jsfiddle.net/MEaze/

醜い色で申し訳ありません。div を「見る」必要がありました。

4

4 に答える 4

1

画像を左に浮かせるだけです。この div は自動的にインライン ブロックになります。

.trophy-image {
    background-color: #FF0000;
    margin: 8px;
    height: 56px;
    float: left;
}

説明を画像の中央に設定するには、line-height を使用できます。

.trophy-info {
    //background-color: #00FF00;
    line-height: 90%;
}

ここに例があります。

于 2013-10-08T14:29:16.253 に答える
1

使用する必要がありますfloat:left

http://jsfiddle.net/cAT2B/
http://jsfiddle.net/y7GJa/
2 つ目の画像も追加しました

DIVも使用する必要があります

.trophy-image {
    background-color: #FF0000;
    margin: 8px;
    height: 56px;
    float:left;
}

.trophy-info {
    background-color: #00FF00;
    float:left;
}
于 2013-10-08T14:24:20.697 に答える
1

それらをフロートにして、div代わりに使用しますp。

.trophy-image {
    float: left;
    background-color: #FF0000;
    margin: 8px;
    height: 56px;
}

.trophy-info {
    float: left;
    background-color: #00FF00;
    margin: 8px;
    line-height: 28px;
}

更新されたjsFiddle

于 2013-10-08T14:24:23.403 に答える
0

画像を左に浮かせる必要があります。

追加した：

float:left;

画像 div の css に。それはあなたが探していたものですか？

http://jsfiddle.net/2jfSK/

于 2013-10-08T14:24:51.500 に答える