2

問題を見つけて、自分でそれを解決できなかったとき、私はちょうどウェブデザインを適応させていました。

見出しと記事の画像を同じ div にコーディングし、div の下部に境界線を付けました。私の問題: 境界線がタイトルの直後に表示され、画像が統合されません。

このフィドルをチェックして、私が何を意味するかを確認してください: Click me!

これが私のコードです：

<div class="latestarticle">   
<a class="articletitle" href="#" >Guitar Hero Experts Melt Your Face Off</a> 
<div class="articlepicture">
</div>

およびCSS:

.latestarticle { 
border-bottom: solid 1px #CCC;
padding: 0px;
margin-top: 12px;
font-size: 12px; 
} 

.articletitle {   
color: #CD5700;
text-decoration: none; 
font-weight: bold; 
font-size: 14px;  
margin-bottom: 5px; 
}
.articlepicture {
height: 76px;
width: 136px;
float: left;
margin-top: 12px;
margin-right: 9px;
border: solid #A3A3A3 2px;
}
4

4 に答える 4

0

なぜこれが機能しないのか不思議です。とにかく、これは動作するはずですまたは にdisplay: table;またはを追加display: table-cell;します.latestarticle。それは正常に動作します。デモを見る

編集

おー！この問題が発生していることを知りました。これは、あなたが左に浮かんでいるためです.articlepicture。デモとしてやりたかったことを願っています。

<div class="articlegroup"></div>あなたの.articlepicturedivに追加して定義しましたdisplay: inline-block;

デモ

于 2013-04-20T04:55:30.727 に答える
0

CSSdisplay: blockを使用して.articletitle

于 2013-04-20T03:38:49.097 に答える
0

あなたが探しているのはclearfixだと思います。親にフローティング要素の高さを認識させたい場合は、「clearfix」div を兄弟としてフローティング要素に追加する必要があります。

<div class="latestarticle">   
  <a class="articletitle" href="#">Guitar Hero</a> 
  <div class="articlepicture"></div>
  <div class="clearfix"></div>
</div>

次に、css で .clearfix スタイルを定義します。

.clearfix { clear:both; }
于 2013-04-20T03:41:16.733 に答える
0

disply:inline-block; latestarticle に 使用します。ここを参照してくださいhttp://jsfiddle.net/WEHw4/5/

于 2013-04-20T03:47:26.297 に答える