0

最も単純なことでさえ、不可能に思えることもあります。

>> リンク

クラスを使用して L と R の 2 つの辺に分割された div (緑色)。

何らかの理由で、クラス「左コンテンツ、右コンテンツ」は「例」の div 内にとどまりたくありません。

#examples 
{
width:100%;
margin-bottom:45%;
padding-top:10%;
height:auto;
border-top: dashed #CCC 1px;
background-color:#0FC
}




.resize 
{
width:100%; 
height:auto; 
border: solid #CCC 1px;
}

.left-content
{
float:left;
width:60%;
}

.right-content
{
float:right;
width:30%;
padding-left:5%;
}

.title
{
margin-top:0px;
font-family: 'PT Sans Narrow', Arial, sans-serif; font-size: 1.00em; font-weight:300;     letter-spacing: 0.1em; color:#F63
}   

.content
{
font-family: 'PT Sans Narrow', Arial, sans-serif;font-size: 0.80em; font-weight:300; color:#444; text-justify:newspaper
}

.goto, .goto a, .goto a:hover, .goto a:visited
{
margin-top:-5px; font-family: 'PT Sans Narrow', Arial, sans-serif;font-size: 0.95em; font-weight:300; color:#09F; text-decoration:none; letter-spacing: 0.1em;
}
4

6 に答える 6

5

要素を浮動させると、親要素はそれらの大きさを見つけるのに苦労する可能性があります。

通常、いわゆる「clearfix」を使用してこれを修正します。これは、浮動要素の後に DOM に追加する追加の要素です。これらにより、親要素は内部コンテンツのサイズを見つけることができます。

HTML

<div class="left"></div>
<div class="right"></div>

<div class="clear"></div>

CSS

div.clear { clear: both; }

clear: both親にプロパティを設定するか、高さを設定することで、これを解決する他の方法があります。しかし、私は通常これを使用しており、私にとっては非常にうまく機能します;)

于 2013-01-17T14:26:42.307 に答える
1

それは、子供たちが浮いているからです。clear:bothフローティングの子の下にcss を使用して div を追加するかoverflow: hidden;、親ボックスに追加します。

于 2013-01-17T14:26:49.423 に答える
1

追加

 overflow: hidden;

#例へ

于 2013-01-17T14:28:03.677 に答える
0

clear: both;コンテナ div にルールが必要です。

次のような clearfix も検討してください: http://www.webtoolkit.info/css-clearfix.html

于 2013-01-17T14:26:56.213 に答える
0 
#examples 
{
    display:table;
}
于 2013-01-17T14:29:59.470 に答える
0

浮動要素は通常のフローから削除されます。したがって、親コンテナーはコンテンツの高さを計算できません。これを修正するには、フロートをクリアする必要があります。これは、基本的にフローに戻すことを意味します。

Nicholas Gallagher は、きちんとした小さな clearfix トリックを作成しました。基本的に、クラスを親要素に追加するだけで、含まれているすべてのフロートがクリアされます。

http://nicolasgallagher.com/micro-clearfix-hack/

 /**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
于 2013-01-17T14:32:33.207 に答える