0

ねえ、私は物事を隣同士や下に並べようとしています

使用しているcssはこちらです。

/* title styles */
#wpp-post-title {
 float:right;
 width:100px 

 }

 /* thumbnail styles */
 #wpp-thumbnail {
    float:left;
    width:80px;
 }

このように表示されます

ここに画像の説明を入力

しかし、私はそれをこのように見せたい

ここに画像の説明を入力

4

5 に答える 5

1

IDの代わりにクラスを使用し、クリアプロパティhttp://www.w3schools.com/cssref/pr_class_clear.aspを確認してください

于 2012-04-22T00:54:54.007 に答える
1

このようなものが機能する可能性があります：

jsFiddleデモ：http ：//jsfiddle.net/vPvbn/

CSS：

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    display: block;
    height: 80px;
    margin: 10px 0;
    padding: 20px 0 0 85px;
}

HTML：

<ul>
    <li style="background: url(http://i.imgur.com/9M7yb.jpg) no-repeat 0 0; padding-right: 10px;">LEAKED: The Winner of RuPaul's Drag Race Season 4 Is...</li>
    <li  style="background: url(http://i.imgur.com/eJxiy.jpg) no-repeat 0 0; padding-right: 10px;">WATCH: Rihanna's 'Battlefield' Movie Trailer.</li> 
</ul>
于 2012-04-22T01:04:42.037 に答える
0 
/* title styles */
#wpp-post-title {
 width:100px 
 display: inline-block;
 .display: inline;
 .zoom:1;

 }

 /* thumbnail styles */
 #wpp-thumbnail {
     display: inline-block;
     .display: inline;
     .zoom:1;
    width:80px;
 }
于 2012-04-22T00:54:46.957 に答える
0

HTMLが表示されない場合、推測することしかできませんが、CSSに次のスタイルを追加するのが最善の推測です。

/* You will probably need to change "li" to something more specific, lest it
   break your existing list styles. */
li {
    overflow:hidden;
}

これにより、リストアイテムがフロートビットをラップするように強制されます。フロートされた要素は親コンテナの高さを変更しません。したがって、内部のすべて<li>がフロートされているため、<li>要素の高さは0pxになり、見ているような奇妙な動作が発生します。との高さをoverflow: hidden強制的に確認することでこれを修正します。<li>#wpp-thumbnail#wpp-post-title

于 2012-04-22T00:55:03.910 に答える
0

サムネイル#wpp-post-titleと同じ高さを指定すると、問題が解決するはずです。現時点では、ブラウザーは内部のテキストに基づいて div の高さを自動的に決定しています。

また、両方の div にdisplay: inline-blockプロパティが指定されていることを確認してください

于 2012-04-22T00:57:25.407 に答える