CSS Float div作为块而不是网格答案

【问题标题】：CSS Float divs sitting as block not as gridCSS Float div作为块而不是网格
【发布时间】：2011-10-19 16:55:12
【问题描述】：

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

我想要的是漂浮在蓝色 div 旁边的绿色 div。和.block div 显示为网格。我不想删除 .m div 并将 .blocks 浮动到容器内。不指定.m的宽度可以做什么

没有仅 JavaScript 的 CSS 解决方案

【问题讨论】：

不明白。绿色的 div 已经漂浮在蓝色的旁边了？
你能解释一下吗，因为现在很混乱。
蓝色的不是next。它已经清理了它的左边。它下来了。我希望蓝色 DIV 保留在左侧作为侧边栏，绿色 div 是 blocks 的容器（白色边框）。而红色的 div 是整个故事的容器。

标签： css css-float liquid-layout

【解决方案1】：

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

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

风格：

.wrapper{
    width:100px;
}

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

【讨论】：

【解决方案2】：

据我了解，您希望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/

【讨论】：

【解决方案3】：

在这种情况下，您最好的解决方案是假设“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/

【讨论】：

你使用的绝对是破坏流动性的
仅相对于父级绝对，它是液体