html - 需要两个 div 才能正确排列

Question

这是两个 div 的阵容的屏幕截图。

左列是，我想在它右边排列的 div 是

并且这两个 div 都在

.content-body {
    padding:10px 15px;
    font-size:.8em;
    font-family:arial;
    overflow:auto;
}

.col-left {
    float:left;
    position:relative;
    overflow:auto;
    height:100%;
    width:20%;
    padding:0 5px 0 0;
}

.col-middle {
    width:auto;
    height:auto;
    float:left;
    xmargin-top:5px;
    xfont-size:.8em;
    border:1px solid red;
    font-family:arial;
}

如何让 .col-middle div 正确排列？

任何帮助表示赞赏。

Answer 1

将.col-middle的宽度更改为80% 或更小，以便两个 div 都可以放入它们的容器中。

你也可以让.col-middle向右浮动。

Answer 2

另一种选择（虽然你真的应该给右列一个宽度）：

    .col-middle {
        ...
        margin-left: 20%;
    }

编辑：如果你给 .col-middle 一个左边距，没有必要浮动它或给它一个宽度

Answer 3

添加一个

clear:none;

对你们两个列 div

和一个

width:80%;

到您的中间栏应该使他们能够并排:)

Answer 4

col-middle 采用宽度：100%，因此您必须提供宽度：小于 80%。

您可以做的另一个解决方案是让 width:79% 并删除 float:left 并使其显示：table-cell;

.col-middle {
  width: 79%
  height:auto;
  display: table-cell;
  xmargin-top:5px;
  xfont-size:.8em;
  border:1px solid red;
  font-family:arial;
}