первого ребенка не вынимая запас

Question

ссылки колонки: первая-ребенок: Левое поле: 0%

не вызывая, у меня есть один и тот же код на другой части сайта (Rev-колонки), и это работает так не уверен, почему он не работает.

скрипку: 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; \t 
 
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>