Question

我正在使用响应式引导程序设计。我想按行和列排列图像。但是图像彼此重叠并且不确定原因。这是我的代码

<div class="container">

            <div class="item" style="width: 194px;height:422px;float:left">
                <img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            </div>
            <div class="item" style="width: 194px;height:422px;float:left">
                <img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            </div>
            <div class="item" style="width: 194px;height:422px;float:left">
                <img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            </div>
        </div>

以下是Fiddle

的链接

Answer 1

您需要使用max-width限制图像的大小，以便它们可以根据父元素的大小进行缩放。

img {max-width:100%;}

我已经更新了你的小提琴：https://jsfiddle.net/pk1pr96n/38/

Answer 2

为什么不使用css？

.item {
    float:left;
}
.container {
    width:1050px;
}

https://jsfiddle.net/pk1pr96n/37/

你的意思是？

PS。因图像大小而需要增加容器div。

Answer 3

您的图片宽度为350px，但您将宽度样式定义为194px。

你需要这个。

<div class="container">

            <div class="item" style="width: 350px;height:422px;float:left">
                <img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            </div>
            <div class="item" style="width: 350px;height:422px;float:left">
                <img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
            </div>
            <div class="item" style="width: 350px;height:422px;float:left">
                <img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />

话虽如此，这实际上并不是响应，因为您正在定义图像大小而不允许它响应。如果您想要响应式图像，请尝试以下方法：

<img src="..." class="img-responsive" alt="Responsive image">

更新示例： 根据您希望图像在移动设备上的布局方式，您可以将每个图像放在自己的列中（例如。.xs-col-4），如下所示：

<div class="container">
  <div class="row">

                <div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style=";float:left">
                    <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
                </div>
                <div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float:left">
                    <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
                </div>
                <div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float:left">
                    <img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
                </div>
            </div>
</div>

这将使三个图像始终并排，无论屏幕大小如何。如果您希望它们堆叠在较小的设备上，那么您可以调整col-xs-4等，直到获得所需的结果。

图像重叠在一起

3 个答案: