css - グリッドとしてではなくブロックとして座っているCSS Float div

Question

http://jsfiddle.net/Qu63T/1/でフィドルをチェックしてください。

私が欲しいのは、青いdivの隣に浮かぶ緑のdivです。および.blockdiv がグリッドとして表示されます。div を削除して、コンテナー内に s.mをフロートしたくありません。.block幅を指定せずにできること.m

JavaScript のみの CSS ソリューションはありません

Answer 1

私はあなたがあなたのCSSのようにfloated div's働き たいというあなたの質問を理解しているので：。block div's

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

.m の後、.block の前にラッパー div を追加して、幅を設定できます。

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

スタイル：

.wrapper{
    width:100px;
}

または、.m にパディングを追加して、ブロックが改行されるようにすることもできます。しかし、それは奇妙な解決策です。