Html 我想用背景色将3个div相邻放置

我想用背景色将3个不同的div相邻放置

我试着把所有的东西都移到左边，但背景色消失了。如果我不让它们浮动，它们会排列在一起，但背景色在那里

.wrapper {
    width: 1222px;
    margin: auto;
}

.footer {
    background-color: #6d757c;
}

footer .footercategory {
    float:left;
}

.footercategory li {
    color: black;
    font-family: NewsGothicBTWebCondRegular, "Trebuchet MS", Arial, sans-serif;
    font-size: 1.3em;
    padding: 0 10px 0 10px;
}

付款


托收承付


托收承付


托收承付


安塞尔扎赫拉滕酒店


托收承付


托收承付


托收承付


安塞尔扎赫拉滕酒店


托收承付


托收承付


托收承付

---

如果我全部向左浮动，则它们彼此相邻，但没有背景

添加要添加到

标记的背景色，并给出100%的宽度

然后，如果使用引导，则为每个div指定classmd-col-4

---

如果不使用引导，请手动为每个div指定宽度，如宽度：33%和显示：内联块

，使用

flex

可以轻松完成此操作。使您的

.wrapper

类使用flexbox将使子元素彼此相邻对齐。对于背景色，如果希望所有3列的背景保持一致，则在

页脚

元素上设置

背景色

。否则，如果希望背景颜色不同，请在每个

.footercategory

类上分别设置每个背景颜色

.footer{
背景色：#6d757c；
}
.包装纸{
显示器：flex；
}
.页脚类别{
弹性：1；
}

付款


托收承付


托收承付


托收承付


安塞尔扎赫拉滕酒店


托收承付


托收承付


托收承付


安塞尔扎赫拉滕酒店


托收承付


托收承付


托收承付

这就是我将如何并行调整三个div的方法，我还添加了一些响应功能，以便您了解如何在不同大小的屏幕上操作这些框

部分{
宽度：100%；
保证金：0自动；
}
.段.段内{
宽度：100%；
最大宽度：1248px；
边距：0自动；/*中心容器*/
填充：10px；/*这与div中的边距相结合将使边距看起来一致*/
框大小：边框框；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弹性方向：行；/*按行排序*/
对齐项目：居中；
证明内容：之间的空间；
文本对齐：居中；
背景色：rgba（255100100,0.25）；
}
.段.段内分区{
宽度：计算（（100%/3）-20px）；/*计算最大精度的宽度|减去余量*/
边距：10px；/*方框之间的间距*/
填充：20px；/*框内空间*/
框大小：边框框；/*计算边框和填充宽度*/
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弹性方向：列；/*按列排序*/
对齐项目：居中；
证明内容：中心；
flex grow:1；/*强制下方的单数div为全宽*/
背景色：rgba（0,0,0,0.25）；
}
@媒体屏幕和（最小宽度：640像素）和（最大宽度：1023像素）{
.段.段内分区{
宽度：计算（（100%/2）-20px）；/*计算最大精度的宽度|减去余量*/
}
}
@媒体屏幕和屏幕（最大宽度：639px）{
.段.段内分区{
宽度：100%；/*计算最大精度的宽度|减去余量*/
}
}
.剖面图.剖面图内分区h1{
边缘底部：20px；
}

乱数假文
我的同僚们都是精英。Omnis nemo是一种选择！在威尼斯，除了对赞美之词和赞美之词进行解释的特殊选择之外，没有其他选择

乱数假文
我的同僚们都是精英。Omnis nemo是一种选择！维尼亚姆，多洛尔·内克·纳姆·哈鲁姆码头除外
<footer class="footer">
    <section class="wrapper">
        <div class="footercategory">
            <div>
                <h1>Payment</h1>
                <ul>
                    <li>
                        <span>Lastschrift</span>
                    </li>
                    <li>
                        <span>Lastschrift</span>
                    </li>
                    <li>
                        <span>Lastschrift</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- ROW 2 -->
        <div class="footercategory">
            <div>
                <h1>Unsere Zahlarten</h1>
                <ul>
                    <li>
                        <span>Lastschrift</span>
                    </li>
                    <li>
                        <span>Lastschrift</span>
                    </li>
                    <li>
                        <span>Lastschrift</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- ROW 3 -->
        <div class="footercategory">
            <div>
                <h1>Unsere Zahlarten</h1>
                <ul>
                    <li>
                        <span>Lastschrift</span>
                    </li>
                    <li>
                        <span>Lastschrift</span>
                    </li>
                    <li>
                        <span>Lastschrift</span>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</footer>

.footer {
    background-color: #6d757c;
    height: auto;
    float: left;

}