代码之家 › 专栏 › 技术社区 › Mikayil Abdullayev

无法避免div扩展到另一个

overflow layout html

Mikayil Abdullayev · 技术社区 · 9 年前

出于布局目的从表切换到div听起来很有吸引力,但这非常痛苦。我还不能使用 float 和 oveflow 正确地对齐div。这里是我有以下html和css:

HTML格式

<div class="div-row">
  <div id="divOfficers" class="div-column">DIVOFFICERS</div>
  <div id="divTasks">DIVTASKS</div>

CSS格式

.div-row {
    width:100%;
    overflow:clear;
    margin-bottom:5px;
}
.div-column {
    margin-right:3px;
    float:left;
}
#divOfficers {
    border:3px solid red;
    height:80px;
    width:200px;
    color:red;
}
#divTasks{
    width:300px;
    height:80px;
    border:10px solid orange;
    color:orange;
}

基本上,我需要 divTasks 站在右边 divOfficers ,但没有延伸。但我得到的是:

enter image description here

我已经清除了父div中的溢出,但正如您所看到的那样,这没有帮助。我还需要做什么?

2 回复 | 直到 9 年前

M K Garwa 9 年前

只需提供一个float:右键分配任务,就像您的float一样:左键分配离婚者。如果这是你想要解决的问题,或者如果你需要做其他事情,请告诉我,并将你的代码放在jsfiddle上,因为这会有很大帮助

Vuthy Sok 9 年前

尝试使用CSS3代码,如果您使用float,可能会遇到长内容的问题

.div-row {
    width:100%;
    overflow:clear;
    margin-bottom:5px;
    display: table;
}
.div-column {
    margin-right:3px;    
}
#divOfficers {
    border:3px solid red;
    height:80px;
    width:200px;
    color:red;
    display: table-cell;
}
#divTasks{
    width:300px;
    height:80px;
    border:10px solid orange;
    color:orange;
    display: table-cell;
}

演示: http://jsfiddle.net/vsok/dqmdv7oa/

推荐文章

migo101 · 整数溢出就是那个恶魔吗?

2 年前

flyingbee · 如何只在一个div中创建滚动条

2 年前

Anna_B · 使用鼠标按下的持续时间进行滚动

2 年前

Sam Esmail · CSS深层嵌套溢出

6 年前

Bart F. W. · z索引似乎不起作用

6 年前

techguy2000 · css网格单元格内容溢出不工作

6 年前

Nicolas Frbezar · 隐藏的Css溢出将不起作用,尽管相对于父级的位置

6 年前

DF_ · Flexbox增长容器,增长到一定高度,然后滚动

6 年前

sridesmet · 使用引导下拉菜单滚动挂起

6 年前

amirw · 防止弹性项目折叠

6 年前