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的宽度仅为250像素，因此您应该将其调整为390，或者减少光容器的宽度。

添加/调整以下CSS可行：

- (void)refreshOrientation
{
    if (!self.tableView)
        return;

    // First reset rotation
    self.tableView.transform = CGAffineTransformIdentity;
    self.tableView.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);

    // Adjust frame
    int xOrigin = (self.bounds.size.width - self.bounds.size.height) / 2.0;
    int yOrigin = (self.bounds.size.height - self.bounds.size.width) / 2.0;
    self.tableView.frame = CGRectMake(xOrigin, yOrigin, self.bounds.size.height, self.bounds.size.width);

    // Apply rotation again
    self.tableView.transform = CGAffineTransformMakeRotation(-M_PI/2);
    self.tableView.scrollIndicatorInsets = UIEdgeInsetsMake(0.0, 0.0, 0.0, self.bounds.size.height - 7.0);
}

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

以HTML格式内嵌（块）图像

1 个答案: