一行可以并排有 2 个背景图像吗？答案

【问题标题】：Can there be 2 background images side by side on one row?一行可以并排有 2 个背景图像吗？
【发布时间】：2023-04-03 20:34:01
【问题描述】：

我试图在 Bootstrap 3 的同一行中并排放置 2 个背景图像（每个都在它自己的容器中）。2 footer div backgrounds

无论我做什么，绿色的 div 都会出现在下一行。我正在尝试将这 2 块并排用作页脚，每块都包含文本和社交媒体徽标，随着屏幕变小，它们将保留在自己的 div 中。

如果我不能使用 2 个并排的背景图片，有人可以提供代码来做绝对定位。我认为我不能使用 clip-path，因为并非所有浏览器都支持它们。

【问题讨论】：

请提供一个最小的例子：stackoverflow.com/help/mcve
发布您尝试过的内容，以便我们提供帮助

标签： html css image twitter-bootstrap-3 background

【解决方案1】：

将display: inline-block; 和display:left; 分配给div（图像容器）和图像。最终将padding 和margin 设置为0。
您也可以将span 代替div 用于图像容器。

祝你好运。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>Demo</title>

        <!-- CSS resources -->

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

        <!-- JS resources -->

        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

        <!-- Bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

        <style type="text/css">
            .page-content {
                padding: 30px;
                text-align: center;
                background-color: yellow;
            }

            footer {
                text-align: center;
                position: relative;
                background-color: blue;
            }

            .outer-container {
                margin-left: auto;
                margin-right: auto;
                display: inline-block;
                border: 10px solid blue;
            }

            .img-container,
            .img-container img {
                margin: 0;
                padding: 0;
                display: inline-block;
                float: left;
            }
        </style>
    </head>
    <body>

        <section class="page-content">
            This is the page content
        </section>

        <footer>
            <div class="outer-container">
                <div class="img-container">
                    <img src="left.png" alt="Left image" />
                </div>
                <div class="img-container">
                    <img src="right.png" alt="Right image" />
                </div>
            </div>
        </footer>

    </body>
</html>

【讨论】：

【解决方案2】：

感谢您的回复。我终于能够回答我自己的问题了。

是的，我可以在同一行并排放置 2 个背景图像。问题似乎与引导排水沟有关。所以我创建了一个 no-gutter 类来减少两个 div 之间的空间，然后当屏幕低于 992px 时我使用一个 gutter 类重新添加到 gutter 中。

令人惊讶的是，您可以盯着同一个屏幕 2 天，然后，BAM！让这对你们所有的孩子来说都是一个教训，时不时地休息一下。再次感谢。

【讨论】：

你是怎么做到的？也请帮助我。我想要 2 个并排的背景图片