无法避免 div 延伸到另一个

Question

出于布局目的从表格切换到 divs 听起来是一个有吸引力的决定，但它非常痛苦。我仍然无法正确使用 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 的右边，但不要超过它。但这是我得到的：

我已经清除了父级 div 中的溢出，但如您所见，这没有帮助。我还需要做什么？

Answer 1

只需给 divtasks 一个 float:right 就像你对 divofficers 做 float:left 一样。如果它是你想要的，而不是你的问题解决了，或者如果你需要做其他事情，请告诉我并将你的代码放在 jsfiddle 上，因为它会有很大帮助

Answer 2

尝试使用 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/

无法避免 div 延伸到另一个

Can't avoid div stretching over another one

html

layout

overflow

HTML

CSS