在 HTML 中制作内嵌图像（块）

Question

我的网站中有 6 张图片嵌入在一个 ul 列表和一个 div 标签中，如下所示：

<div id="left_box">
      <input type="textbox" id="myDiv" class="resizedTextbox" display="none" readonly/>
      <ul id="thumbnails">
         <li>
            <div id="main_image_holder">
               <div class="photocontainer" width="100%">
                  <img class="photo" id="website1" src="photo1.jpg" alt="Click to see enlarged image" />
                  <br><br>
                  <figcaption><a href="#website1Modal"/>BooksForGeeks</a></figcaption>
               </div>
         </li>
         <li>
         <div class="photocontainer">
         <img class="photo" id="website2" name="website2" src="aperture.png" alt="Click to see enlarged image" />
         <br><br>
         <figcaption><a href="#website2Modal"/>Aperture Laboratories</a></figcaption>
         </div> 
         </li>
         <li>
         .
         .
         .
         </li>
      </ul>
      </div>


  The CSS that I have used to display the images is : 


#left_box {
margin-top:60px;
padding-top:10px;
width:250px;
margin-left:20px;
padding-bottom:10px;
float:left;
}
#thumbnails {
list-style-type: none;
margin:0;
padding:0;
float:left;
}

#thumbnails li {
margin:0;
padding:0;
float:left;
}

.photocontainer {
width:130px;
height:100px;
margin:10px 10px 10px 10px;
background-color: #fff;
border: 1px solid #000;
float:left;
}
.photo {
position:relative;
width:120px;
height:90px;
top:4px;
left:4px;
border: 1px solid #666666;
}
img{
    display:inline;
}

现在，图像列表出现在最左侧，一个在另一个下方。但是，**我希望将 3 个图像水平显示为一行，其余三个以与第二行相同的方式显示。 **

我怎样才能做到这一点？

我尝试将 css 用作：

img{
display:inline;
}

然而，这并没有奏效。谁能告诉我哪里错了？这是我的网页目前的样子：

提前致谢。

Answer 1

您将照片容器的宽度设置为 120px，并且您想将 3 张图片并排放置，这将占用 390px。 #left_box 的宽度只有 250px，因此您应该将其调整为 390，或者减小照片容器的宽度。

添加/调整以下 CSS 会起作用：

#left_box {
    width:390px;
}

#thumbnails li {
    width: 33.33%;
    float: left;
}

img {
    max-width: 100%;
}

在此处查看有效的 jsfiddle：http://jsfiddle.net/18Lmbs7e/1/

在 HTML 中制作内嵌图像（块）

Make images inline (blocks) in HTML

html

css

jquery

inline

image