0

画像を に揃えようとしていますが、見出しを画像アイコンの周りに折り返すことができません。ここにスクリーン キャップがあります: http://instagram.com/p/YNGBzrtAs8/

私の CSS コードはめちゃくちゃです。現在の混乱状態は次のとおりです。

#deck-sub .news-feed { float: left; width: 90%; padding: 5%; margin: 0 0 15px 0; }
    #deck-sub h1 { background: none; font: bold 2.0em Arial, Helvetica, sans-serif; color: #006586; margin: 0 0 -8px 0; }
    #deck-sub .news-feed h2 a {  color: #006586; text-decoration: none; font-size: 1.2em !important; margin: -33px 0 0 0;}
    #deck-sub .news-feed ul {vertical-align: middle !important; background: none; padding: 5px 0 0 0; list-style: none; }
    #deck-sub .news-feed ul li { vertical-align: middle !important; width: 100%; padding: 5px 0 5px 0; margin: 5px 0 0 0;}
    #deck-sub .news-feed ul li a  { vertical-align: middle !important; width: 100%; font: 0.8em/1.1em Arial, Helvetica, sans-serif; color: #555 !important; text-decoration: none; padding: 0px 0 0 0; margin: -5px 0 0 0; }
    #deck-sub .news-feed ul li a:hover { background: none; color: #009fc7 !important; }
    #deck-sub .new-feed ul li img {  vertical-align: middle !important;  }
    #deck-sub .sfnewsListItem { vertical-align: middle !important; background: #ccc; }
    #deck-sub .sfnewsMetaInfo { vertical-align: middle !important; padding: 0px; margin: 0px; background: #444;}

どんな助けでも大歓迎です。以前にこれに遭遇したことがありますが、この場合、私のトリックは機能しません。前もって感謝します。

4

1 に答える 1

0

見出しを折り返すとはどういう意味かわかりませんが、画像とタイトルを横に並べたいと思いますか? vertical-align これでうまくいくとは思えません。

最適なオプションは、アイコンを として削除し、代わりに背景画像として CSS に配置することです。そうすることで、ピクセルに配置することができます。

また、これら 2 つのニュース\イベント アイコンを 1 つのファイルにスプライトして、提供するリソースを減らすこともできます。

http://www.w3schools.com/css/css_image_sprites.asp

乾杯！スティーブ

于 2013-04-17T13:48:10.053 に答える