Question

我遇到了在div中强制图像与另一个div正确排列同时保持其内联块属性的问题。

请查看此图片以供参考。

基本上，第一个蓝色方块内的两个图像（1＆amp; 2），无论浏览器大小是多少，我都想让它们彼此内联。但我也希望图像＃2的边缘与图像＃3的右边缘对齐。

前两张图片的当前CSS如下：

首先他们所在的div叫做smallPic

.smallPic {
   width:100%;
}

然后每个图像（1和2）具有以下内容：

.img {
  display: inline-block
  width:44%;
}

对于大图片（largePic）

.largePic {
   width:91%
}

大图片不是宽度的原因：100％是因为当我将小图片设置为50％时，它们不再变成内联，因为它们对于它们所处的div来说太大了。请记住它们有他们之间的空间（7个空格）所以我也必须考虑到这一点。我也没有更多的空间来增加div的宽度，因此必须保持不变。而且由于它们处于如此奇怪的百分比，因此它们在右边缘上没有正确排列。

所以我的问题是，我如何强制图像＃1＆amp; ＃2适合他们的div，保持内联和阵容＃3。

编辑：我认为如果我发布link to my site会更容易，所以你们可以看到我在说什么。

Answer 1

您必须在容器中将padding设置为0px，并在图片中将margin设置为0px。剩余是可选的。

.smallPic {
   width:100%;
   padding:0px;
   overflow-x:hidden;
   border:0px;
}
.img {
  display: inline-block;
  width:50%;
  padding:0px;
  margin:0px;
  border:0px;
}

.largePic {
   width:100%;
   padding:0px;
   margin:0px;
   border:0px;
}

Answer 2

我希望这对你有用。

   

.blue {
background-color: #00f;
width: 100%;
padding: 5px;
overflow: auto;
}
.one, .two {
display: inline-block;
width: 48.5%;
height: 100px;
border: 1px solid;
background-color: #f00;
}
.one {
float: left;
}
.two {
float: right;
}
.three {
display: inline-block;
width: 100%;
height: 100px;
border: 1px solid;
background-color: #f00;
}

<html>
<body>
    <div class="blue">
    <div class="one"></div>
    <div class="two"></div>
    </div>
    <div class="blue">
    <div class="three"></div>
    </div>
</body>
</html>

Answer 3

您需要最小化HTML，删除任何额外的空格和缩进。这些实际上是在浏览器中显示的，并且会使图像占用更多的空间。

看看这个演示：

＆＃13;

.blue {background-color: #00F; padding:6px; margin-bottom: 0.5em;
  line-height: 0; /* this will prevent the images from "adding" additional height*/
}

.smallPic img:first-child {
  margin-right: 3px; /*small gap between the images*/
  width: calc(50% - 3px); /*must reduce the image width by the amount of the margin*/
}
.smallPic img:last-child {
  margin-left: 3px; /*same goes here*/
  width: calc(50% - 3px);
}

.largePic img {
  width: 100%;
}

＆＃13;

<div class="smallPic blue"><img src="https://unsplash.it/400/220"><img src="https://unsplash.it/400/220"></div>

<div class="largePic blue"><img src="https://unsplash.it/600/240"></div>

＆＃13;

jsfiddle链接：https://jsfiddle.net/3cvvms27/

在浏览器调整大小的同时保持图像内联，同时确保其正确排列

3 个答案: