需要两个 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

添加 a

clear:none;

到您的列 div

和 a

width:80%;

到您的中间列应该使它们能够并排:)

Answer 4

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

您可以做的另一个解决方案是设置宽度：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;
}