我有一个问题，我希望我的图片像这样对齐:
而且它应该具有响应能力，但我无法实现所需的帮助
这是我的源代码:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user scalable=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
#img-one {
float: right;
}
#img-three {
float: right;
}
</style>
</head>
<body>
<div id="Image-Section">
<div id="img-one">
<img src="one.jpg" alt="Image" class="img-responsive" width="631" height="390">
</div>
<div id="img-two">
<img src="two.jpg" alt="Image" class="img-responsive" width="631" height="390">
</div>
<div id="img-three">
<img src="three.jpg" alt="Image" class="img-responsive" width="631" height="390">
</div>
<div id="img-four">
<img src="four.jpg" alt="Image" class="img-responsive" width="631" height="390">
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
我使用 bootstrap 和 css 对齐了我的图片，它也是响应式的，但很困惑
最佳答案
你可以尝试这个，只是不要像我那样改变CSS中的padding，你应该在 Bootstrap 自定义中改变它
演示:https://jsfiddle.net/2Lzo9vfc/173/
编辑:按钮https://jsfiddle.net/2Lzo9vfc/175/
HTML
<div class="container text-center">
<div class="row">
<div class="col-sm-6">
<img src="http://placehold.it/700x400" alt="" class="img-responsive">
</div>
<div class="col-sm-6">
<img src="http://placehold.it/700x400" alt="" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img src="http://placehold.it/700x400" alt="" class="img-responsive">
</div>
<div class="col-sm-6">
<img src="http://placehold.it/700x400" alt="" class="img-responsive">
</div>
</div>
</div>
CSS
.col-sm-6 {
padding-left: 0;
padding-right: 0;
}
关于html - 如何将4张图片组合成响应式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33915444/