Как правильно применить .clearfix: после класса к HTML? - PullRequest
Новая
       43

Как правильно применить .clearfix: после класса к HTML?

0 голосов
/ 18 июня 2011

В настоящее время я пытаюсь (и не могу) получить .clearfix: после очистки исправление подробно описано здесь в стеке , а в позиции все здесь для работы в 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 -->

1 Ответ

0 голосов
/ 18 июня 2011

Что ж, если ваш рабочий код в точности соответствует вашему примеру, вы на самом деле не определили правило стиля .clearfix.Это был бы ваш первый шаг.Кроме того, подробное описание того, что именно вы пытаетесь выполнить, также поможет.

Пытаетесь ли вы, чтобы ваш div правильно «содержал» плавающие элементы?Или вам нужно, чтобы все вокруг ваших плавающих элементов правильно выстроилось в «блоки»?

Из вашего фрагмента HTML, похоже, он первый.В этом случае простое добавление 

.clearfix {
    overflow: auto;
}

к вашей таблице стилей должно работать.

Но, не зная точно, что вы ищете, или как выглядит HTML вокруг этого HTML, сложнодать окончательный ответ.

...