Question

我正在尝试使多个div彼此相邻（在同一行上），但是它们保持彼此重叠。

我尝试使用float: left;或display: inline-block;解决此问题，但div彼此重叠，而不是在同一行上彼此相邻。

（我使用tachyons CSS工具包）

<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>

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：

#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;
}

我希望div以相同的方式分布在colors div上，并且不会溢出。

Answer 1

您首先需要删除(MARGIN = 2，然后使用all毫无问题。

Working example

TRUE

也许您在尝试其他地方应用此CSS规则？还是保留您的apply(head(mat, 2), 2, function(x) all(x == c(1, 2)))？

Answer 2

您可以使用CSS属性-display: flex;

您也需要删除该职位。

这是工作代码：

https://codepen.io/NehhaSharma/pen/XWWzZzW

Answer 3

#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>

Answer 4

最好在父母上使用display: flex，在孩子上使用display: inline-flex。此外，添加justify-content: center将使孩子们居中。我为您的颜色添加了一个附加类，以便我们可以重新利用它。希望对您有帮助！

#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>

DIV元素彼此重叠

4 个答案: