第一个孩子没有删除保证金

Question

links-column：first-child：margin-left：0％

没有触发，我在网站的另一部分（rev-column）上有完全相同的代码，这是有效的，所以不确定它为什么不起作用。

小提琴：https://jsfiddle.net/82hLzm2v/2/

 <div class="twelve columns">
 <div class="links-section-header"></div>
 <div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>

</div>

.links-column             { width: 32%; margin-left:1%; float:left; }
.links-column:first-child { margin-left: 0%; }
}.links-cats-wrap{
display:block;
float:left;
width:100%;
height:400px;
background-color:#fff;
margin-bottom:10px;
border:1px solid #DDDDDD;

Laravel代码：

@foreach ($links as $link)
<div class="twelve columns">
<div class="links-section-header">{{ $link->category }}</div>

@foreach ($link->linksitems as $linksitem)
<div class="links-column">
<div class="links-cats-wrap">
<div class="links-cats-img"><img class="u-full-width"    src="images/links/{{ $linksitem->img }}"> </div>
<a href="http://{{ $link->link1 }}" target="_blank"><div class="links-cats-link">{{ $linksitem->link }}</div></a>
<div class="links-cats-desc">{{ $linksitem->text }}</div>

</div>
</div>
</div>
@endforeach
@endforeach

Answer 1

您的第一个<div class="links-column">不是父div的第一个第一个孩子。

您需要将<div class="links-section-header"></div>移到<div class="twelve columns">之外。

从您的JSFiddle改编的代码。

/* For devices larger than 550px */

  /* Review Columns*/
.rev-column:first-child { margin-left: 0%; }
.rev-column:nth-child(odd){ margin-left: 0%; }
.rev-column   { width: 49%; margin-left:2%; float:left; }
  /* Links Columns*/
.links-column             { width: 32%; margin-left:1%; float:left; }
.links-column:first-child { margin-left: 0%; }


/*Columns*/
  .container { width: 100%; height:auto; overflow:hidden; padding: 0 0px; box-sizing: border-box; }
  .column,
  .columns {
    margin-left: 2%;}
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }



  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 49%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 68%; }
  .nine.columns                   { width: 76.0%;          } /*increased from 74% column margin decreased from 4% to 2%*/
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }
.links-wrap{
width:100%;
min-height:400px;
height:auto;
overflow:hidden;
background-color:#f2f2f2;
}.links-center-wrap{
width:960px;
height:auto;
min-height:400px;
overflow:hidden;
background-color:;
margin: 0 auto;
padding-top:10px;
padding-bottom:10px;
}.links-wrap-wrap{
width:960px;
height:auto;
overflow:hidden;
}.links-section-header{
color:#fff;
width:100%;
height:30px;
line-height: 30px;
background-color:#605860;
margin-bottom:10px;

}.links-cats-wrap{
display:block;
float:left;
width:100%;
height:400px;
background-color:#fff;
margin-bottom:10px;
 border:1px solid #DDDDDD;

}.links-cats-wrap:last-child {
  margin-right: 0px;
}.links-cats-img{
width:100%;
height:160px;
background-color:;
line-height:40px;
color:#fff;
font-weight:700;
font-size:16px;
}.links-cats-link{
width:100%;
height:60px;
background-color:;
line-height:60px;
font-weight:300;
font-size:16px;
margin: 0 auto;
text-align:center;
}.links-cats-link:hover{
color:#ff0000;
}.links-cats-desc{
width:100%;
height:110px;
padding:20px;
background-color:;
line-height:20px;
}.links-share{
width:300px;
height:30px;
}.links-share-twitter{
color:#fff;
float:left;
width:100px;
height:30px;
line-height:30px;
background-color:#32ccfe;
text-align:center;
}.links-share-facebook{
color:#fff;
float:left;
width:100px;
height:30px;
line-height:30px;
background-color:#3E5B97;
text-align:center;
}.links-share-google{
color:#fff;	
float:left;
width:100px;
height:30px;
line-height:30px;
background-color:#F8694D;
text-align:center;

<!-- content -->
<div class="links-section-header"></div>
<div class="twelve columns">
 
<div class="links-column">
    <div class="links-cats-wrap">
    </div>
</div>
<div class="links-column">
    <div class="links-cats-wrap">
    </div>
</div>
    
</div>