DIV 元素相互重叠
[英]DIV elements overlapping each other
问题描述
I'm trying to make multiple divs go next to each other (on the same line) but they keep overlapping each other.
我正在尝试使多个 div go 彼此相邻（在同一行），但它们彼此重叠。
I've tried solving this issue with float: left;我试过用float: left;解决这个问题。 or display: inline-block;或display: inline-block; but the divs overlap each other instead of going next to each other on the same line.但是 div 彼此重叠，而不是在同一行上彼此相邻。
(I used tachyons css toolkit) （我使用了快子 css 工具包）
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
HTML: HTML：
<body>
<div id="guesses" class="br3 tc">
<div class="colors">
<div class="br-100 yellow"></div>
<div class="br-100 orange"></div>
</div>
</div>
</body>
CSS: CSS：
#guesses {
width: 512px;
height: 512px;
background-color: black;
margin: 0 auto;
margin-top: 64px;
overflow: hidden;
border: black 1px solid;
}
.yellow {
background-color: yellow;
width: 64px;
height: 64px;
position: absolute;
margin: 16px;
}
.orange {
background-color: orange;
width: 64px;
height: 64px;
position: absolute;
margin: 16px;
}
I expect the divs to be spread across the colors div in an equal way and that doesn't overflow.我希望 div 以相同的方式分布在colors div 中，并且不会溢出。
4 个解决方案
解决方案1
2 已采纳 2019-10-31 17:07:21
You'll first need to remove the position: absolute and then using display: inline-block does the trick no problem.您首先需要删除position: absolute然后使用display: inline-block没有问题。
.orange,
.yellow {
display: inline-block;
}
Perhaps you were applying this CSS rule somewhere else in your attempts?也许您在尝试的其他地方应用了这个 CSS 规则？ Or perhaps keeping your position: absolute ?或者也许保留您的position: absolute ？
解决方案2
0 2019-10-31 17:09:19
You can do this by using CSS property - display: flex;您可以使用 CSS 属性来执行此操作 - display: flex;
You need to remove the position too.您还需要移除 position。
Here is the working code:这是工作代码：
https://codepen.io/NehhaSharma/pen/XWWzZzW https://codepen.io/NehhaSharma/pen/XWWzZzW
解决方案3
0 2019-10-31 17:11:04
#guesses { width: 512px; height: 512px; background-color: black; margin: 0 auto; margin-top: 64px; overflow: hidden; border: black 1px solid; }.yellow { background-color: yellow; width: 64px; height: 64px; margin: 16px; display: inline-block; }.orange { background-color: orange; width: 64px; height: 64px; margin: 16px; display: inline-block; }
<div id="guesses" class="br3 tc"> <div class="colors"> <div class="br-100 yellow"></div> <div class="br-100 orange"></div> </div> </div>解决方案4
0 2019-10-31 17:14:08
You are better off using display: flex on the parent and display: inline-flex on the children.您最好在父级上使用display: flex并在子级上使用display: inline-flex 。 Also, adding justify-content: center will center the children for you.此外，添加justify-content: center将为您将孩子居中。 I added an additional class to your colors, so that we can reutilize it.我在您的 colors 中添加了一个额外的 class，以便我们可以重新利用它。 Hope it helps!希望能帮助到你！
#guesses { width: 512px; height: 512px; background-color: black; margin: 0 auto; border: black 1px solid; }.colors { display: flex; justify-content: center; }.color { display: inline-flex; }.yellow { background-color: yellow; width: 64px; height: 64px; }.orange { background-color: orange; width: 64px; height: 64px; }
<body> <div id="guesses" class="br3 tc"> <div class="colors"> <div class="br-100 yellow color"></div> <div class="br-100 orange color"></div> </div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.