-
ID:ropLha さんの質問

こんにちは!
.

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 件

ID:LZ1Hci さんの回答

citeを右寄せにしたいだけだったら、だけど
citeをdisplay:blockにしてtext-align:rightじゃだめ?

ID:ropLha

なるほど〜〜!!!!!そういうやり方でも対応出来ますね!!ありがとうございます!!引き出し増やせるように頑張ります!

ID:9bYqq7 さんの回答

けっこう勘違いしてる人が多いけど、claerfixはfloatが指定された要素の直属の親要素に掛けないと意味が無いよ。
今回の場合はこんな感じ。
.
blockquote:before,
blockquote:after {
content:"";
display:table;
}
blockquote:after {
clear:both;
}
blockquote { //ie6,7 husLayout bug fix
zoom:1;
}

最終更新日:2014-08-24 (2,200 views)

関連するトピックス

ページ上部に戻る