css 图像定位（行和列）答案

【问题标题】：css image positioning (rows and columns)css 图像定位（行和列）
【发布时间】：2020-09-17 18:13:11
【问题描述】：

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

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

我的代码：

<!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 中看起来如何？

【问题讨论】：

你尝试过什么吗？
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议您通过 Google 或通过搜索 SO 进行一些额外的研究，然后尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
可能使用float:left、margin-left和右边的width's和height's。
我建议使用“引导”网格：getbootstrap.com/css/#grid
您需要创建一个由行和列组成的网格系统。如果需要，一行中的每一列可以进一步细分为另一组行和列。对于 NO1 你会有一行有两列。第二列（右侧）将包含两行。这些行中的第一行将包含三列，第二行将包含两列。

标签： html css

【解决方案1】：

尝试在代码下面做，

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%。

【讨论】：

【解决方案2】：

哦，伙计们，这很容易。谢谢你的所有答案。 “user2340218”提出的网格布局非常好。几秒钟后，我创建了一个好看的图片布局！但是我有一个新问题：是否可以在一行上放置效果（a: hover ...）？

    * {
    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>

【讨论】：

【解决方案3】：

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

您还需要在所有这些上使用margin-right 和margin-bottom，但组织成两个或三个不同的类，并根据需要分配给<img> 标签。

【讨论】：