当前位置：文江博客话题详情

CSS Float div 作为块而不是网格

发布于 2024-12-10 16:42:49 字数 288 浏览 0 评论 0原文

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

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

没有 JavaScript Only CSS 解决方案

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无边思念无边月 2024-12-17 16:42:49

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

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

样式：

.wrapper{
    width:100px;
}

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

You can add a a wrapper div, after .m and before .block and set his width:

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

Style:

.wrapper{
    width:100px;
}

Or you can add some padding in .m, so the blocks will line-break. But that's a wierd solution.

回复收藏 0 原文

纸短情长 2024-12-17 16:42:49

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

as i understand your question that you want floated div's work like block div's
your
CSS:
.

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

check this http://jsfiddle.net/sandeep/Qu63T/6/

回复收藏 0 原文

暖阳 2024-12-17 16:42:49

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

Your best solution in this case would be to assume that "m" isnt floating, its just a padded div sitting inside a bigger container, and the blue div is living absolutely positioned, like this:

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

回复收藏 0 原文

~没有更多了~