Question

.container {
    width:100px;
    text-align:center;
}

.container .unit {
    position:relative;
    float:left;
}

<div class="container">
    <div class="unit">
        <img src="img.png"/>
    </div>
    <div class="unit">
        <img src="img2.png"/>
    </div>
</div>

这不起作用，为什么？/我应该怎么做？/什么是正确的方法？编辑添加另一个div。

Answer 1

在不知道图片宽度的情况下，这是我对您的问题最好的“猜测”。看小提琴https://jsfiddle.net/ujg77o3r/3/

前2个图像的宽度等于（或者可能小于）container的宽度，一旦2个图像组合大于100px图像将低于此，您可以看到第二个小提琴中的例子。

如果这是您的问题，请将合并图像宽度的宽度设置为小于容器宽度。

HTML

<div class="container">
  <div class="unit">
    <img src="http://lorempixel.com/50/50/" />
  </div>
  <div class="unit">
    <img src="http://lorempixel.com/50/50/" />
  </div>
</div>

CSS

.container {
  width: 100px;
  text-align: center;
}
.container .unit {
  position: relative;
  float: left;
}

float：指定宽度

1 个答案: