html - 防止对齐的 div 重叠

Question

我想首先说标题已经产生了一些类似的问题，但我已经尝试了解决方案，例如 z-index, display: inline-block,和 overflow:hidden，以及建议的其他一些选择修复。这些都没有解决我的问题。

当我使用以下代码调整浏览器大小时，div 将相互重叠。

我的aspx:

<div id="contentContainer">
    <div id="contentOne">
        <asp:LinkButton ID="ItemOne" runat="server" Text="Sample Item One"></asp:LinkButton>
        <br />
        <asp:Label ID="txt_itemOne" runat="server" Text="Sample Item Description"></asp:Label>
    </div>
    <div id="contentTwo">
        <asp:LinkButton ID="ItemTwo" runat="server" Text="Sample Item Two"></asp:LinkButton>
        <br />
        <asp:Label ID="txt_itemTwo" runat="server" Text="Sample Item Description"></asp:Label>
    </div>
    <div id="contentThree">
        <asp:LinkButton ID="ItemThree" runat="server" Text="Sample Item Three"></asp:LinkButton>
        <br />
        <asp:Label ID="txt_itemThree" runat="server" Text="Sample Item Description"></asp:Label>
    </div>
</div>

CSS:

#contentOne {
    border: 1px solid black;
    display: inline-block;
    height: 200px;
    width: 20%;
    max-width: 80%;
    min-width: 200px;
    top:0;
    position: absolute;
    text-align: center;
}
#contentTwo {
    border: 1px solid black;
    display: inline-block;
    height: 200px;
    width: 20%;
    min-width: 200px;
    top: 0;
    left: 25%;
    position: absolute;
    text-align:center;
}
#contentThree {
    border: 1px solid black;
    display: inline-block;
    height: 200px;
    width: 20%;
    min-width: 200px;
    top: 0;
    left: 50%;
    position: absolute;
    text-align:center;
}
#contentContainer {
    top: 20%;
    width: 100%;
    position: absolute;
}

Here's a fiddle to save time

Answer 1

使用 absolute positioning不是一种相对于彼此布置事物的方法。 Flexbox 或 Grid 是用于此的 CSS 方法。

flex 盒方法

#contentContainer {
  display: flex;
  justify-content: space-between;
  margin-top: 20%;
  width: 100%;
}

#contentOne,
#contentTwo,
#contentThree {
  border: 1px solid black;
  display: inline-block;
  height: 200px;
  width: 20%;
  max-width: 80%;
  min-width: 200px;
  text-align: center;
}

<div id="contentContainer">
    <div id="contentOne">
        <asp:LinkButton ID="ItemOne" runat="server" Text="Sample Item One"></asp:LinkButton>
        <br />
        <asp:Label ID="txt_itemOne" runat="server" Text="Sample Item Description"></asp:Label>
    </div>
    <div id="contentTwo">
        <asp:LinkButton ID="ItemTwo" runat="server" Text="Sample Item Two"></asp:LinkButton>
        <br />
        <asp:Label ID="txt_itemTwo" runat="server" Text="Sample Item Description"></asp:Label>
    </div>
    <div id="contentThree">
        <asp:LinkButton ID="ItemThree" runat="server" Text="Sample Item Three"></asp:LinkButton>
        <br />
        <asp:Label ID="txt_itemThree" runat="server" Text="Sample Item Description"></asp:Label>
    </div>
</div>

网格法

CSS Tricks有一个很好的入门指南 grid .

#contentContainer {
  display: grid;
  grid-column-gap: 10%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px;
  margin-top: 20%;
}

#contentOne,
#contentTwo,
#contentThree {
  border: 1px solid black;
  text-align: center;
}

<div id="contentContainer">
    <div id="contentOne">
        <asp:LinkButton ID="ItemOne" runat="server" Text="Sample Item One"></asp:LinkButton>
        <br />
        <asp:Label ID="txt_itemOne" runat="server" Text="Sample Item Description"></asp:Label>
    </div>
    <div id="contentTwo">
        <asp:LinkButton ID="ItemTwo" runat="server" Text="Sample Item Two"></asp:LinkButton>
        <br />
        <asp:Label ID="txt_itemTwo" runat="server" Text="Sample Item Description"></asp:Label>
    </div>
    <div id="contentThree">
        <asp:LinkButton ID="ItemThree" runat="server" Text="Sample Item Three"></asp:LinkButton>
        <br />
        <asp:Label ID="txt_itemThree" runat="server" Text="Sample Item Description"></asp:Label>
    </div>
</div>