проблемы выравнивания плавающего div

Question

У меня есть этот макет, и у меня есть эти два div, maincontent и extracontent.там должны плавать рядом друг с другом.но когда у меня есть более одного дополнительного контента, он почему-то скользит по основному контенту.Можете ли вы помочь мне исправить это?

Я предоставил js скрипку, http://jsfiddle.net/XzRun/

HTML

<div id="container">
    <div id="content">

        <div class="extracontent">
            <h1>Other header</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc orci, dignissim sagittis urna.</p>
        </div>
        <div class="extracontent">
            <h1>Other header</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc orci, dignissim sagittis urna.</p>
        </div>

        <div class="maincontent">
            <h1>Some header text</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat aliquam justo, nec faucibus nulla porta eget. Fusce ipsum quam, interdum posuere aliquam non, laoreet sed leo. Maecenas luctus, tellus varius fermentum gravida, libero metus pharetra sem, ac scelerisque erat felis vestibulum diam. Donec vulputate eleifend interdum. Etiam ultrices, ante vitae luctus hendrerit, quam justo tempor tortor, pulvinar euismod quam ligula vel eros. Duis vel tellus mi, congue gravida purus. Nulla facilisi. Fusce ac magna arcu, sed vulputate justo. Quisque nec ante vitae lorem laoreet lobortis. Phasellus euismod urna sed turpis tincidunt vehicula. Aenean consequat rutrum sapien vel tincidunt. Mauris tincidunt pretium nisi nec ultricies. Aenean a sem nunc. Nunc luctus, metus in adipiscing hendrerit, lacus felis mollis dui, quis feugiat leo mi nec dolor.</p>
        </div>

    </div>
</div>

CSS

#container {
    width:1000px;
    margin:0 auto;
    padding:20px 0;
    text-align:left;
}
#content {
    margin-left:10px;
    float:left; /* lines up the left #content and the right #sidebar div's beside   eachother */
    width:810px;
}
.maincontent {
    float:left;
    margin:10px 10px 10px 0; /* double the right side because left has 0 */
    padding:0 20px;
    width:506px;
    color:rgb(50,50,50);
    background:rgb(255,255,255);
}
.extracontent {
    clear:left;
    float:left;
    margin:10px 10px 10px 0; /* double the right side because left has 0 */
    padding:0 20px;
    width:200px;
    height:200px;
    color:rgb(50,50,50);
    background:rgb(255,255,255);
}

Answer 1

Проблема в том, что div всегда плавают горизонтально, а не вертикально.То, что вы хотите сделать здесь, это плавать .extracontent по вертикали, сохраняя горизонтальные отношения.Чтобы сделать это, оберните все .extracontent div в div '.allextras`, используя следующий css:

.allextras { clear: left; float: left; width: 220px; }

Или как хотите, чтобы его стиль получался так, как вы хотите.

Answer 2

Ваш #content, окружающий один #maincontent и два #extracontents, имеет меньшую ширину, чем все они.506 + 200 + 200 + все поля> 810px.Дайте ему больше места, и ваши дивы не упадут на другие уровни.

Answer 3

Как определено в вашем CSS, ваш # контент имеет ширину 810 пикселей, ваш .maincontent имеет ширину 506 пикселей, а ваш .extracontent имеет ширину 200 пикселей.Если вы добавите дополнительный .extracontent , у вас будет 906px.Таким образом, он выходит за пределы 810 пикселей и скользит вниз.

Answer 4

Я не совсем уверен, чего вы хотите достичь.

Если вы хотите, чтобы две дополнительные панели контента были рядом друг с другом, вам придется либо расширять, либо сокращать дополнительный и основной контент. Для этого я рекомендую вам использовать JQuery для определения количества .extracontent, а затем изменить ширину в соответствии с этим.

Лучшим способом было бы поместить .extracontent внутри контейнера со статической шириной, а затем сделать что-то вроде: разделите extracontent.width на (extracontent в родительском) .count.

Вы также можете растянуть #content, чтобы иметь минимальную ширину вместо фиксированной ширины 1000