Question

我有一个关于CSS和HTML中图像定位的问题。我想做一个实现，如图所示（NO2）。

我的第一个想法是HTML中的表，但问题出在那里，我不知道如何连续放置两张图片..

我的代码：

<!DOCTYPE html>
<html>
<body>

<table style="width:100%">
  <tr>
    <td><img src="pic_mountain.jpg"style="width:100px;height:50px;"></td>
    <td><img src="pic_mountain.jpg"style="width:100px;height:50px;"></td>
    <td><img src="pic_mountain.jpg"style="width:100px;height:50px;"></td>
  </tr>
  <tr>
    <td><img src="pic_mountain.jpg"style="width:100px;height:50px;"></td>
    <td><img src="pic_mountain.jpg"style="width:100px;height:50px;"></td>
    <td><img src="pic_mountain.jpg"style="width:100px;height:50px;"></td>
  </tr>
  <tr>
    <td><img src="pic_mountain.jpg"style="width:100px;height:50px;"></td>
    <td><img src="pic_mountain.jpg"style="width:100px;height:50px;"></td>
    <td><img src="pic_mountain.jpg"style="width:100px;height:50px;"></td>
  </tr>
</table>

</body>
</html>

图片的这种排列如何在CSS和HTML中显示？谢谢你的回答！

我希望这会改善我的第一个（坏）问题并删除downvotes。

Answer 1

如果您的图片尺寸已经符合您的要求，则可以在所有图片尺寸上使用CSS float: left，只需将它们按照从左上角到右下角的顺序放入HTML中。

您还需要margin-right和margin-bottom所有这些，但是在两个或三个不同的类别中进行组织，并为您分配给<img>的不同设置根据需要标记。

Answer 2

尝试在代码下方执行，

NO：1图像定位：

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
.container{
    background-color: gray; margin: 0px auto; width: 950px ! important;
    margin: 20px auto;
}
.col1{
    border: 1px solid rgb(238, 238, 238); margin-right: 20px; width: 25%; float: left;height: 500px;background-color: red;
}
.col2{
     border: 1px solid rgb(238, 238, 238); height: 500px; float: left; width: 72%;
}
.imgdiv {
    background-color: red;
    border: 1px solid rgb(255, 255, 255);
    float: left;
    height: 100px;
    margin-right: 20px;
    width: 31.09%;
}
.imgdiv:last-child{
  margin-right:0 !important;
}

.sec_row_content{
     background-color: red;
     clear: both;
     height: 380px;
     margin-top: 20px;
     clear:both;/***we need to clear the position (float left or right)***/

}
</style>
</head>
<body style="padding: 0px; margin: 0px;">
<div class="container" style="">
    <div class="col1" style="">
    </div>
    <div class="col2" style="">
        <!--row1--><div class="" style="height:100px;">
            <!--image1--><div class="imgdiv" style=""></div>
            <!--image2--><div class="imgdiv" style=""></div>
            <!--image3--><div class="imgdiv" style=""></div>
                   </div>
         <!--row2-->
                <div class="height:100px;margin-top:20px;clear:both;">

                   <div class="sec_row_content"></div>

                </div>
    </div>
</div>

</body>
</html>

NO：2作为相同的分割4个div为4个列并设置百分比宽度每个25％的100％。

Answer 3

哦，男人，这很容易。谢谢你的所有答案。由＆＃34; user2340218＆＃34;提出的网格布局。是非常好的。几秒钟后，我创造了一个漂亮的图片布局！但是我有一个新问题：是否可以在一条线上放置一个效果（a：悬停......）？

    * {
    box-sizing: border-box;
}
.header {
    border: 1px solid red;
    padding: 15px;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid blue;
}
.col-md-1 {
width: 27.33%; 
}
</style>

<div class="row">
  <div class="col-md-1">f<img src="row001.jpg"></div>
</div>

css图像定位（行和列）

3 个答案: