0

私は現在 .clearfix:after を取得しようとしています (そして失敗しています) .clearfix:after の詳細はスタック hereであり、Chrome と Firefox で動作するすべてが位置にあります。

私の理解では、クリアする必要があるフロートを含む要素に .clearfix クラスを追加する必要があります。ただし、その方法を試してみると、修正が機能しません。

私が台無しにした場所と、.clearfix クラスを正しく適用する方法を誰かが指摘できますか?

助けてくれてありがとう！

関連する CSS は次のとおりです。

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.details_left{
width:400px;
float:left;
margin-right:35px;
}

.details_right{
width:400px;
float:left;
}

.problem, .faq{
min-height:500px;
background-color:white;
width:870px;
padding:15px 15px 15px 15px;
box-shadow: 0px -1px 3px #888;
-moz-box-shadow: 0px -1px 3px #888;
}

.cluster{
width:410px;
border-bottom: 1px solid #cccccc;
margin: 5px 10px 7px 10px;
}
.title{
color:#0066CC;
font-size:0.95em;
font-weight:bold;
}

.role{
color:#666666;
font-size:0.75em;
margin: 2px 0px 2px 0px;
}

.summary{
color:black;
font-size:0.9em;
font-weight:normal;
margin: 2px 0px 2px 0px;
}

.extras, .add_sub_bucket, .add{
color:#666666;
font-size:0.7em;
margin: 2px 0px 7px 0px;
}

HTML は次のとおりです。

<div class="problem" class="clearfix">
        <div class="details_left">
            <div class="cluster">
                <a href="bMvRdr-mUOU" id="johnk" class="vid_trigger"><div class="title">The importance of demonstrating intellectual curiosity</div></a>
                <div class="role">Kenton Kivestu: Summer Consultant, BCG San Francisco</div>
                <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class="extras">View Kenton's blog posts</div>
            </div>

            <div class="cluster">
                <a href="#" id="rob" class="context" ><div class="title">On the importance of playing to company culture</div></a>
                <div class="role">Rob Reiling: Associate, McKinsey & Co., Minneapolis</div>
                <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class="extras">View full interview</div>
            </div>

            <div class="cluster">
                <a href="#" id="jesse" class="context" ><div class="title">Remembering to be yourself in interviews</div></a>
                <div class="role">Jesse Lau: Consultant, Parthenon, San Francisco</div>
                <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class="extras">View full interview</div>
            </div>

            <div class="cluster">
                <a href="#" id="richard" class="context" ><div class="title">The required confidence factor</div></a>
                <div class="role">Richard Smith: Consultant, Bain & Co., Boston</div>
                <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class="extras">View full interview</div>
            </div>

            <div class="cluster">
                <a href="#" id="jessi" class="context" ><div class="title">Jessi talks about X factor</div></a>
                <div class="role">Jessi England: Consultant, Bain & Co., San Francisco</div>
                <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class="extras">View full interview</div>
            </div>

            <div class="cluster">
                <a href="#" id="jessi" class="context" ><div class="title">Communicating clearly and cohesively</div></a>
                <div class="role">Amar Shibli: Consultant, McKinsey & Co., New York</div>
                <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
                <div class="extras">View full interview</div>
            </div>
        </div>

        <div class="details_right" id="video_container">
            Hey there! Select an interview from the left! test
        </div>
    </div> <!-- closing problem div -->
4

1 に答える 1

0

作業コードが例とまったく同じである場合、実際には.clearfixスタイリング ルールを定義していません。それがあなたの最初のステップです。また、達成しようとしていることをもう少し詳しく説明することも役立ちます。

div浮動要素を適切に「含む」ようにしようとしていますか? それとも、フローティング要素の周りのものを「ブロック」に正しく並べる必要がありますか?

HTML スニペットからは、前者のようです。その場合、単純に

.clearfix {
    overflow: auto;
}

あなたのスタイルシートにうまくいくはずです。

しかし、何を探しているのか、またはこの HTML の周りの HTML がどのように見えるのかが正確にわからないため、決定的な答えを出すのは困難です。

于 2011-06-18T16:23:18.287 に答える