Html css图像定位（行和列）_Html_Css

Html css图像定位（行和列）

html css

Html css图像定位（行和列）,html,css,Html,Css,我有一个关于CSS和HTML中图像定位的问题。我想做一个实现，如图（NO2）所示我的第一个想法是HTML中的表格，但问题是，我不知道如何在一行中定位两张图片我的代码： <!DOCTYPE html> <html> <body> <table style="width:100%"> <tr> <td><img src="pic_mountain.jpg"style

我有一个关于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中会是什么样子

如果您的图像大小已经如您所愿，您可以在所有图像上使用CSS

float:left

，只需按照从左上到右下的顺序将它们放入HTML中即可

您还需要在所有这些标签上设置

右边距

和

右边距底部

，但要组织成两个或三个不同的类别，并根据需要设置为

标签。

尝试在代码下方执行操作

否：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>


.集装箱{
背景色：灰色；边距：0px自动；宽度：950px！重要；
保证金：20px自动；
}
.col1{
边框：1px实心rgb（238238238238）；右边距：20px；宽度：25%；浮动：左侧；高度：500px；背景色：红色；
}
.col2{
边框：1px实心rgb（238238238238）；高度：500px；浮动：左侧；宽度：72%；
}
伊姆格迪夫先生{
背景色：红色；
边框：1px实心rgb（255、255、255）；
浮动：左；
高度：100px；
右边距：20px；
宽度：31.09%；
}
.imgdiv：最后一个孩子{
右边距：0！重要；
}
.第二行内容{
背景色：红色；
明确：两者皆有；
高度：380px；
边缘顶部：20px；
清除：两者；/***我们需要清除位置（向左或向右浮动）***/
}

否：2与4列4个div相同，并将每个div的宽度百分比设置为100%的25%。

哦，伙计们，这很容易。谢谢你的回答。“user2340218”提出的网格布局非常好。几秒钟后，我创建了一个好看的图片布局！但我有一个新问题：有可能在一条线上放置一个效果（a：悬停…）

*{
框大小：边框框；
}
.标题{
边框：1px纯红；
填充：15px；
}
.罗：之后{
内容：“；
明确：两者皆有；
显示：块；
}
[类别*=“列-”]{
浮动：左；
填充：15px；
边框：1px纯蓝色；
}
.col-md-1{
宽度：27.33%；
}
F

您尝试过什么吗？希望您至少尝试自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些额外的研究，要么通过谷歌，要么通过搜索，尝试一下。如果您仍然有问题，请带着您的代码回来，并解释您尝试了什么以及为什么不起作用。可能使用

float:left

、

margin left

和right

width

和

height

。我建议使用“bootstrap”网格：您需要创建一个由行和列组成的网格系统。如果需要，可以将行中的每一列进一步细分为另一组行和列。对于NO1，您将有一行，其中有两列。第二列（右侧）将包含两行。第一行包含三列，第二行包含两列。

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