css - CSS Float div作为块而不是网格

Question

请查看http://jsfiddle.net/Qu63T/1/上的小提琴

我想要的是漂浮在蓝色旁边的绿色 div。和.block显示为网格的 div。我不想删除.mdiv 并将.blocks 浮动在容器内。不指定宽度可以做什么.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

您可以在 .m 之后和 .block 之前添加一个包装 div 并设置他的宽度：

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

风格：

.wrapper{
    width:100px;
}

或者您可以在 .m 中添加一些填充，以便块将换行。但这是一个奇怪的解决方案。