Question

好的，所以这很难解释，所以如果我不清楚，请提出问题

在我的html页面中，我有一个主“容器”div，其中有多个div，但容器内的每个div都放在两列之一中（所以如果容器中有div，那么是左列还是右列）

<div id="container">
  <div id="column1">
    <div id="item1-1"></div>
    <div id="item1-2"></div>
    <div id="item1-3"></div>
  </div column1>
  <div id="column2">
    <div id="item2-1"></div>
    <div id="item2-2"></div>
    <div id="item2-3"></div>
  </div column2>
</div container>

[注意：我知道语法不正确，我只是让它更容易阅读]

所以，换句话说，我想要两列div可以改变大小（因此页面大小可以变化），因此item1-2出现在item1-1下面等等。这里的问题是我想要的容器中的div出现在它的内部，所以我不能使用绝对或相对定位。有人告诉我我应该使用桌子，但我不知道该怎么做。

所以，我的问题是：只使用html和css，还有什么可以完全按照上面的内容进行操作吗？

Answer 1

首先：让</div column1>和</div column2>只说</div>

第二名：CSS：

#container {
    width: 100%;
}

#column1, #column2 {
    float: left;
    width: 50%;
}

Answer 2

要实现您想要的外观，您应该使用CSS float property。但是，为了避免父容器无法正确显示的问题，请考虑遵循两个可能的solutions之一：

使用

浮动元素后添加div

clear: both

或将以下代码应用于您的父div

overflow: hidden

HTML定位：相对于第三个对象放置两个对象而不中断流程

2 个答案: