在编写响应性网站时不合适的UI

Question

我构建了一个类似的UI，如下图所示：

我的工作是在这个小提琴

下面是我代码的一部分：

html, body {
        height: 100%;
        width: 100%;
    }
    #header {
        background-color: #125e9a;
        height: 7%;
        width: 100%;
    }

在图片中，左列表和右列表都是完美的。然而，在我的代码中，左列表和右列表都不像图片中所显示的那样。

下面是我的代码的屏幕截图：

右边的列表乱七八糟，我检查了代码，但无法修复它。你能给我提个好主意来解决吗？

Answer 1

由于您没有为第一类指定浮动，因此它充当块并占据全部宽度。应用浮动:左到左列类别来对齐它。

.ctg {
  float: left;
}

输出：

​

​