Question

上的小提琴

我想要的是绿色div漂浮在蓝色旁边。并且.block div显示为网格。我不想删除.m div并将.block浮动到容器内。如果不指定.m

的宽度，可以做什么

没有JavaScript的CSS解决方案

Answer 1

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

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

风格：

.wrapper{
    width:100px;
}

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

Answer 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/

Answer 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/

CSS Float divs作为块而不是网格

3 个答案: