Question

我遇到的问题是，当我开始拉伸互联网浏览器时，我的照片正在移动。它必须是所有图片内联的特定宽度。我想这样做，所以我的图片保持内联，无论互联网浏览器有多紧张。

这是我的代码：

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "scrolling">
   <div class = "quick-info"> <!--Start quick-info-->
     <div class="image"> <!--Start1-->
       <img src="http://d39ya49a1fwv14.cloudfront.net/wp-content/uploads/2013/07/0x600.jpg" height="340" width="250"/>
     </div>
    <div class="image"> <!--Start2-->
      <img src="http://gstylemag.com/wp-content/uploads/2014/05/Lebron-James-2.jpg" height="340" width="257"/>
    </div>
    <div class="image"> <!--Start3-->
      <img src="http://upload.wikimedia.org/wikipedia/commons/8/8d/President_Barack_Obama.jpg" height="340" width="257"/>
    </div> <!--End3-->
    <div class="image"> <!--Start4-->
      <img src="http://www.zooatlanta.org/media/image/panda_cubs2013_140402_meilun_meihuan_ZA_0769_600.jpg" height="340" width="257"/>
    </div> <!--End4-->
    <div class="image"> <!--Start5-->
      <img src="http://www.soflasun.com/wp-content/uploads/2014/12/dog8.jpg" height="340" width="259"/>
    </div> <!--End5-->
 </div> <!--End of quick-info-->
 </div>
 </body>
 </body>
 </html>

CSS：

.quick-info {
  background-color:#659CEF;
  height: 350px;
  font-family: Garamond;
  font-size: 16px;
}
.image {
  display: inline;
  padding: 0px;
  margin: 0px;
  float: left;
  border: 0px;
}
#text {
  position: absolute;
  top: 270px;
  width: 257px;
  height: 85px;
}

此代码中使用的图片只是我为此示例制作的临时图片。任何帮助将非常感谢！我不是HTML专业人员，如果我没有按照HTML规定做某事，请对不起，但请帮助我！我已经坚持了几天。非常感谢！

Answer 1

我使用以下CSS

修改了你的css

.quick-info {
  background-color:#659CEF;
  height: 350px;
  width:1600px;  
  font-family: Garamond;
  font-size: 16px;
}
div.scrolling {
  width:800px;
  overflow-x:scroll;/*not really needed but it made the fiddle easier to navigate*/
  height:350px;
  display:inline-block;
}

您需要在容器上定义宽度，然后图像将流入线。

在我的示例中（http://jsfiddle.net/9f0rhe3w/处可见），您可以看到它并排流动。只需确保.quick-info的宽度始终至少为显示的所有图像的宽度。

我添加了溢出滚动条，但您也可以将relative添加到.quick-info，将position:absolute添加到.scrolling，然后使用计时器移动它以获取自动收报机。

HTML图片在互联网浏览器拉伸时移动

1 个答案: