CSS-элементы с плавающей точкой в ​​виде блока, а не сетки

Question

Пожалуйста, проверьте скрипку на http://jsfiddle.net/Qu63T/1/

То, что я хочу, это зеленый div, чтобы плавать рядом с синим. и .block divs, чтобы появиться как сетка. Я не хочу удалять .m div и перемещать .block внутри контейнера. Что можно сделать без указания ширины .m

Нет JavaScript только CSS решение

Answer 1

как я понимаю ваш вопрос, что вы хотите floated div's работать как block div's ваш CSS:.

block{
        border: 1px solid white;
        float: left;
        display: inline-block;
        clear:left;
    }

отметьте http://jsfiddle.net/sandeep/Qu63T/6/

Answer 2

Лучшим решением в этом случае было бы предположить, что «m» не плавает, это просто мягкий div, расположенный внутри большого контейнера, и синий div живет абсолютно позиционированным, как это:

.c{
background-color: red;
display: block;
position: relative;
overflow: hidden;
}
.l{
background-color: blue;

height: 40px;
width: 120px;
display: inline-block;
position: absolute;
left: 0;
right:0;
}
.m{
display: block;
position: relative;
margin-left: 125px;
}
.block{
border: 1px solid white;
float: left;
display: inline-block;
background-color: green;
}

http://jsfiddle.net/Qu63T/7/

Answer 3

Вы можете добавить обёртку div, после .m и перед .block и установить его ширину:

<div class="m">
     <div class="wrapper">
           <div class="block">
           (...)
           </div>
     </div>
</div>

Стиль:

.wrapper{
    width:100px;
}

Или вы можете добавить некоторые отступы в .m, чтобы блоки разбивались на строки. Но это странное решение.