Xhtml и Divs / плавающие - PullRequest
Новая
       19

Xhtml и Divs / плавающие

0 голосов
/ 21 мая 2011

Я пытаюсь поместить два элемента div рядом друг с другом в одной строке, сделать разрыв и затем сделать еще один полный блок div.

Вот что у меня есть
код тела 

<body>
    <div class="noFloat">
        <div class="square bgBlue ltFloat">I'm Blue</div>
        <div class="square bgGreen ltFloat">I'm Green</div>
    </div>  
    <div class="dvCenter">I'm in the middle</div>
    <div class="dvCenter">I'm in the middle</div>
</body>

css 

body {
    background-color: red;
}
.square {
    width: 100px;
    height: 100px;
}
.bgBlue {
    background-color: blue;
}
.bgGreen {
    background-color: green;
}
.dvCenter {
    float: none;
    margin: auto;
    width: 300px;
    background-color: purple;
}
.ltFloat
{
    float: left;
}
.noFloat
{
    display: block;
    float: none;
}

Я очень застрял в том, почему это не будет работать правильно.Любая помощь будет принята с благодарностью: -)
В перерыве я намеревался, чтобы два левых плавающих элемента не разделяли горизонтальное пространство с центрированными элементами.

1 Ответ

1 голос
/ 21 мая 2011

Измените правило .noFloat на 

.noFloat
{
    display: block;
    float: none;
    overflow:auto;
    clear:both;
}

демо при http://jsfiddle.net/gaby/53vVP/1

В качестве альтернативы вы можете установить clear:left; в правиле .dvCenter.

демо при http://jsfiddle.net/gaby/53vVP/

...