nth-child значения и 2 col to 3 col

Я искал эту проблему, но не могу найти ответ.nth-child значения и 2 col to 3 col

У меня есть файл, где у меня есть 1 столбец на «мобильных» и 2 столбцах на «планшете», и мне бы хотелось, чтобы 3 столбца на «рабочем столе» или что-то большее, чем 1100 пикселей.

Я пробовал кучу разных значений nth-child. Он работает от 1 до 2, но не от 2 до 3. Я не могу понять это. Благодаря!

/*Grid ------------------*/ 
 

 
/* Max out, center */ 
 

 
.image-grid { 
 
    max-width: 1600px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
.image-grid li { 
 
    float: left; 
 
    width: 47%; 
 
    margin: 1.5%; 
 
    text-align: center; 
 
} 
 
.image-grid p { 
 
    margin: 0; 
 
    padding: 2% 0 5% 0; 
 
    color: black; 
 
    font-size: 1.15rem; 
 
    font-weight: 400; 
 
} 
 
.image-grid:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.image-grid li:nth-child(odd) { 
 
    clear: both; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
/*Breaks ------------------*/ 
 

 
@media (max-width: 640px) { 
 
    * { 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    .image-grid ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    .image-grid li { 
 
    float: none; 
 
    width: auto; 
 
    padding: 0 0 4%; 
 
    } 
 
    .image-grid li a p { 
 
    font-size: 1.65rem; 
 
    } 
 
} 
 
@media (min-width: 1100px) { 
 
    body { 
 
    background: green; 
 
    } 
 
    .image-grid p { 
 
    font-size: 1.3rem; 
 
    } 
 
    .image-grid li { 
 
    float: left; 
 
    width: 31.3333%; 
 
    margin: 1.5%; 
 
    border: 1px solid white; 
 
    } 
 
    .image-grid li:nth-child(4) { 
 
    clear: right; 
 
    background: aqua; 
 
    } 
 
    .image-grid { 
 
    border: 1px solid yellow; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div> 
 
    <ul class="image-grid"> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/logos.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0007_WHT_web_logos-06.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/logos.html">Logos</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/akqa.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0011_WHT_web_AKQA-MAIN.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/akqa.html">AKQA</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/nike2021.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0004_WHT_web_Nike2021_8.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/nike2021.html">Nike 2021</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/gimme5.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0009_WHT_web_Gimme5-02.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/gimme5.html">Walnut's Gimme 5</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/xbox.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0000_WHT_web_Halo-03.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/xbox.html">Xbox Master Chief Collection</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/opolis.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0003_WHT_web_Opolis-13.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/opolis.html">Opolis Design</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/votesolar.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0002_WHT_web_VoteSolar-05.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/votesolar.html">Vote Solar</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/nikeevents.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0005_WHT_web_Nike-Sales-Rec_1_0.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/nikeevents.html">Nike Sales Events</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/classicben.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0010_WHT_web_Classic-Ben-05.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/classicben.html">Classic Ben</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/medigap.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0006_Medigap-N1_Who-is-AC.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/medigap.html">AllCare Medigap</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/levi.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0008_WHT_web_Levi-06.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/levi.html">Levi</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 

 
    </ul> 
 
    <!-- End group --> 
 
    </div> 
 
</div> 
 
<!-- End wrapper -->

источник

2015-11-20 jonaschafer

Добавить/изменить следующие свойства в запросе 1100px СМИ:

@media (min-width: 1100px) { 
    .image-grid li { 
     margin: 1%; 
     box-sizing: border-box; 
    } 

    .image-grid li:nth-child(odd) { 
     clear: none; 
    } 
}

Вопросы с вашим кодом являются:

У вас есть нечетные столбцы клиринговые , который не требуется с трехкомпонентной компоновкой
Ваша маржа установлена на 1,5%. Таким образом, объединенная ширина каждого li составляет 34.3333%, слишком широкая, чтобы соответствовать трем по одной строке.
Каждый li имеет границу 1px, поэтому даже с 1% полями для общей ширины 33.3333% граница 1px подталкивает третий элемент к следующей строке. box-sizing: border-box включает границу ширины ли, поэтому элемент действительно 33.3333% ширины.

источник

2015-11-20 03:55:11

Хм. Это не сработало. Он просто сделал это 2 столбца. – jonaschafer

Вы уверены, что вы добавили недвижимость правильно? Я просто тестировал, и это работает. –

пришлите мне фрагмент? Я попробовал ваше решение @ stephenbolton, но не работал. чтобы быть ясно, что это мой код: '@media (мин-ширина: 1100px) { \t тела { \t \t фон: зеленый; \t} \t \t .image сетки р { \t \t размер шрифта: 1.3rem; \t} \t .image-grid li { \t float: left; ширина: 33.3333%; margin: 1%; фон: bisque; } \t .image-grid li: nth-child (нечетное) { \t ясно: оба; \t} \t \t.image-grid { \t \t border: 1px solid yellow; \t} } ' – jonaschafer

его, потому что вы никогда не переписал это правило:

.image-grid li:nth-child(odd) { clear: both; }

Так третий пункт очистное обе стороны.

источник

2015-11-20 04:07:13

Хм, это тоже не сработало. вот мой фрагмент: https://jsfiddle.net/whyhellothere/k5t3dawd/embedded/result/ – jonaschafer

Посмотрев на фрагмент Джоша, я теперь понимаю, что вы имеете в виду. Благодаря! Только, чтобы быть ясным: clear: оба означает, что 3-я колонка переходила к следующей строке. И моя маржа была слишком большой, что также подталкивало мой контент вниз. Правильно? – jonaschafer

звучит так, будто вы решили это? –

Это работает для меня:

@media (min-width: 1100px) { 
    /*keep all others*/ 

    /**remove this one 
    .image-grid li:nth-child(2n+1) { 
     clear: both; 
    } 
    */ 

    /* modify this one*/ 
    .image-grid li { 
    float: left; 
    width: 31.3333%; 
    margin: 1%; /* Change from 1.5% */ 
    border: 1px solid white; 
    box-sizing: border-box; /*Added this line*/ 
    }

Надеется, что это помогает T04435.

источник

2015-11-23 03:04:38 T04435

nth-child значения и 2 col to 3 col

ответ

Смежные вопросы