こんにちは!
.
floatしている要素を親要素の中に入れる為にfloatをしている要素の疑似要素にclearfixをかけているのですが、親要素の中に入ってくれません。
.
何が上手く行かない原因なのでしょうか?
.
親要素にoverflow:hiddenをすれば上手く行くのですが、毎回、citeタグを中に入れる訳でもないので、出来れば親要素にoverflow:hiddenをせず、citeタグのafterにclearfixをかけて対応したいと考えておりました。
.
**サンプル**
http://codepen.io/anon/pen/acjKI
.
**HTML**
<blockquote cite="">
<p>aaaaaa</p>
<cite>bbbbbbb</cite>
</blockquote>
<p>cccccc</p>
.
**CSS**
blockquote {
border-left:solid 5px #ccc;
margin:0 0 10px 0;
padding:5px 0 5px 10px;
font-size: 15px;
background: yellow;
}
cite {
float: right;
}
cite:after {
clear:both;
content: " ";
display: table;
}
.
※改行が投稿するとw3qでは消えてしまう仕様なようなので、改行のところに「.」を打って、無理矢理改行させてます。
みんなの回答 2 件
citeを右寄せにしたいだけだったら、だけど
citeをdisplay:blockにしてtext-align:rightじゃだめ?
けっこう勘違いしてる人が多いけど、claerfixはfloatが指定された要素の直属の親要素に掛けないと意味が無いよ。
今回の場合はこんな感じ。
.
blockquote:before,
blockquote:after {
content:"";
display:table;
}
blockquote:after {
clear:both;
}
blockquote { //ie6,7 husLayout bug fix
zoom:1;
}
関連するトピックス