我试图在 Bootstrap 3 的同一行上并排放置 2 个背景图像(每个都在它自己的容器中)。2 footer div backgrounds
无论我做什么，绿色的 div 都会出现在下一行。我正在尝试将这两 block 并排用作页脚，每 block 都包含文本和社交媒体 Logo ，随着屏幕变小，它们将保留在自己的 div 中。
如果我不能使用彼此相邻的 2 个背景图片，有人可以提供代码来对 .我认为我不能使用 clip-path，因为并非所有浏览器都支持它们。
最佳答案
- 为 div(图像容器)和图像提供
display: inline-block;和display:left;。最终将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>
关于html - 一行中可以并排放置 2 张背景图片吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48236331/