html - 如何将内部缩略图定位在容器的相同位置，简单的 html 问题

Question

我对 HTML 位置有一个简单的问题 在下面的代码中，我有一个包装器 div> Container in this div 我还有 2 个 div 名称是 side_bar_wrap 和 left_wrap in left_wrap div 我有 4 个缩略图 div 名称与缩略图相同 我的问题是如何将这 4 个缩略图 div 与左右之间的空间对齐，但在该组的第一个和最后一个 div 上不对齐

以下是我的代码，请帮助我..

<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>

.container 
{
    width:100%;
    max-width:1170px;
    margin:0 auto;
}

* 
{
    margin:0;   
    padding:0;
}

.side_bar_wrap
{
    width:29%;     
    height:300px;
    background:#148b23;
    margin:0 10px 0 0;
    float:left;
}

.left_wrap 
{
    width:70%;
    float:right;
}


.thumbnails{
width: 22%;
margin: 0 11px;

position: relative;
overflow: hidden;
    height:300px;
    border:1px solid #cfcfcf;
    float:left;
}

.inner_task 
{

}


.clear
{
    clear:both;
}

<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>

<div class="container">


        <div style="width:29%; float:left; height:400px; background:gray; margin:40px 11px 40px 0;"></div>

        <div style="width:70%;float:left; height:400px; background:gray; margin:40px 0;"></div>

        <div class="side_bar_wrap"></div>
        <div class="left_wrap">
            <div class="thumbnails">
                <div class="inner_thumb">
                    <div style="width:100%; height:200px; background:#efefef;"></div>
            </div>
            </div>

            <div class="thumbnails">
                <div class="inner_thumb">
                    <div style="width:100%; height:200px; background:#efefef;"></div>
            </div>
            </div>

            <div class="thumbnails">
                <div class="inner_thumb">
                    <div style="width:100%; height:200px; background:#efefef;"></div>
            </div>
            </div>

            <div class="thumbnails">
                <div class="inner_thumb">
                    <div style="width:100%; height:200px; background:#efefef;"></div>
            </div>
            </div>

        </div>

        <div style="width:100%; float:left; height:400px; background:gray; margin:40px 0;"></div>
    </div>

Answer 1

你可以使用css为你提供的first-child和last-child

基本上 first-child 允许你对第一个 div 进行样式更改，而 last-child 允许你对最后一个 div 进行样式更改

所以像这样:

.thumnails:first-child {
  /*NO SPACE ON ONE SIDE*/
  margin-left:0px;
  
 }
.thumnails:last-child {
  /*NO SPACE ON ONE SIDE*/
  margin-right:0px;
  
 }

如果你想提前一点，你可以使用 :nth-child()，当你想改变第三个 div 或其他东西的样式时，所以

.thumnails:nth-child(3) {
  background-color:#ff0000;  
}