Div左浮动下降

赛奇兰

我将在包装器中包含三个子div,其中两个将需要向右浮动,而一个将始终向左浮动(其中一个具有.main类)。您可以在小提琴中查看我的HTML结构

我的小提琴在这里

HTML:

<div id="wrap">
    <div class="child"> 
        This is initiator
    </div>
    <div class="child">
        This is second joinee
    </div>
    <div class="main child">
        This is third joinee
    </div>
</div>

CSS:

#wrap{
  width:600px;
  height:400px;
}
.child:nth-child(even){
  background:red;
}
.child:nth-child(odd){
  background:green;
}
.child{
  height: 200px;
  width: 200px;
  display: block;
  float: right;
  clear:right;
  text-align: center;
  vertical-align: middle;
}
.main{
  height: 400px!important;
  width: 400px!important;
  float:left!important;
  clear:none!important;
  background:yellow !important;
}

但是左浮动的Div总是会下降。有人可以帮助我理解这一行为吗?

注意:我不想更改我的HTML结构。

艾哈迈德

将以下内容添加到maincss文件中类中:

.main{
    position:absolute;
    left:0;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

左浮动div

来自分类Dev

左浮动的div画廊

来自分类Dev

将右div浮动到左div

来自分类Dev

左右浮动:左div在右div下方

来自分类Dev

如何使左浮动div不重叠右浮动div

来自分类Dev

当我输入更多文本时,浮动div会下降

来自分类Dev

动态更新浮动左Div的宽度

来自分类Dev

并排堆叠div而不使用左浮动

来自分类Dev

左浮动div无法正确堆叠

来自分类Dev

围绕左浮动div垂直对齐div

来自分类Dev

将页面内容推送到左浮动div以下

来自分类Dev

我希望左浮动div调整移动设备上的宽度

来自分类Dev

使用浮动左 CSS 排列 SPAN 和 DIV

来自分类Dev

CSS-向左浮动+填充=最后一个Div下降?

来自分类Dev

在窗口调整大小期间,div 浮动到左侧,同时信息下降

来自分类Dev

CSS浮动左对齐

来自分类Dev

无法清除浮动:左

来自分类Dev

屏幕尺寸较小时,将固定边距div移到左浮动div下方

来自分类Dev

将右 div 浮动在左 div 上以进行媒体查询

来自分类Dev

用另一个 div 覆盖浮动 1 步左 div

来自分类Dev

在左浮动的 DIV 之后的下一行中创建 DIV

来自分类Dev

CSS浮动对齐方式不下降

来自分类Dev

浮动:左段,然后是浮动:无段

来自分类Dev

如何浮动中心但仍保持左浮动的属性

来自分类Dev

CSS中左浮动div的负右边距有什么用?

来自分类Dev

如何浮动(左/右)3个div之间没有空格?

来自分类Dev

在一系列浮动中创建/删除行:左div

来自分类Dev

CSS-左浮动的两个50%宽度的div不在一行上-jsfiddle

来自分类Dev

左浮动后清除会在两个div之间创建一个空隙