Question

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

无论我做什么，绿色div都会在下一行结束。我试图将这两个彼此相邻的作品作为页脚使用，每个都保留文本和社交媒体徽标，当屏幕变小时，它们将保留在它自己的div中。

如果我不能将2张背景图片彼此相邻使用，有人可以让代码进行绝对定位。我不认为我可以使用剪辑路径，因为并非所有浏览器都支持它们。

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

Answer 2

谢谢你的回复。我终于回答了自己的问题。

是的，我可以将2张背景图片放在同一行上。问题似乎与引导排水沟有关。所以我创建了一个无沟槽类来减轻两个div之间的空间，然后当屏幕低于992px时我使用了一个阴沟类来添加回到排水沟。

很棒，你可以盯着同一个屏幕2天然后，BAM！让这成为你所有小孩的教训，不时地休息一下。再次感谢。

一行可以并排显示2张背景图片吗？

2 个答案: