2

Есть 40 ячеек .ticket-link в блоке #ticket. Максимальная ширина #ticket - 560px. Минимальная - 320px.

Нужно выравнивать .ticket-link по ширине + обнулять правый margin для последней ячейки в ряде. Сейчас в css захардкоренно два значение, для 560px и 320px. Как правильно выравнивать для экранов шириной между 560 и 320. Хардкорить все популярные ширины экранов не хочу.

#tickets .ticket-links .ticket-link {
  width: 47px;
  height: 47px;
  line-height: 47px;
  box-sizing: border-box;
  background-color: #f7fcff;
  border: 1px solid #0064c6;
  color: #0064c6;
  text-align: center;
  display: block;
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
}

#tickets .ticket-links .ticket-link:nth-child(10n+10) {
  margin-right: 0;
}

@media only screen and (max-width:600px) {
  #tickets .ticket-links .ticket-link {
    width: 52px;
    height: 52px;
    line-height: 52px;
  }
  #tickets .ticket-links .ticket-link:nth-child(5n+5) {
    margin-right: 0;
  }
}

@media only screen and (max-width:320px) {
  #tickets .ticket-links .ticket-link:nth-child(5n+5) {
    margin-right: 0;
  }
}
<div id="tickets">
  <div class="ticket-links">
    <a class="ticket-link" href="http://examenpdd.local/tickets/1">1</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/2">2</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/3">3</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/4">4</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/5">5</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/6">6</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/7">7</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/8">8</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/9">9</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/10">10</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/11">11</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/12">12</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/13">13</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/14">14</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/15">15</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/16">16</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/17">17</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/18">18</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/19">19</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/20">20</a>
    <div class="clear"></div>
  </div>
</div>

введите сюда описание изображения

введите сюда описание изображения

1
  • Используй bootstrap целиком, а лучше только его часть. Будет проще верстать адаптивные шаблоны.
    – agaro706
    9 апр 2018 в 16:42

4 ответа 4

1

Вроде бы если я верно понял проблему то inline-block это автоматически делает

*{
  margin:0;
  padding:0;
  text-align:justify;
}
.block{
  width:80%;
  margin:auto;
  background:lightblue;
  text-align:center;
}
.item{
  display:inline-block;
  width:100px;
  height:100px;
  border:1px solid blue;
  text-align:center;
  line-height:100px;
  margin:8px;
  text-decoration:none;
  color:blue;
  
}
<div class="block">
  <a href="" class="item">item1</a>
  <a href="" class="item">item2</a>
  <a href="" class="item">item3</a>
  <a href="" class="item">item4</a>
  <a href="" class="item">item5</a>
  <a href="" class="item">item6</a>
  <a href="" class="item">item7</a>
  <a href="" class="item">item8</a>
  <a href="" class="item">item9</a>
  <a href="" class="item">item10</a>
  <a href="" class="item">item11</a>
  <a href="" class="item">item12</a>
  <a href="" class="item">item13</a>
  <a href="" class="item">item14</a>
  <a href="" class="item">item15</a>
  <a href="" class="item">item16</a>
  <a href="" class="item">item17</a>
  <a href="" class="item">item18</a>
  <a href="" class="item">item19</a>
  <a href="" class="item">item20</a>
</div>

для наглядности : codepen.io

1

Увеличиваем ширину базового контейнера справа на ширину margin.

width: calc(100% + 10px);

Таким образом правый отступ будет, но он попадёт внутрь дополнительной ширины в 10px.

.ticket-links {
  width: calc(100% + 10px);
}

#tickets .ticket-links .ticket-link {
  width: 47px;
  height: 47px;
  line-height: 47px;
  box-sizing: border-box;
  background-color: #f7fcff;
  border: 1px solid #0064c6;
  color: #0064c6;
  text-align: center;
  display: block;
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
}
<div id="tickets">
  <div class="ticket-links">
    <a class="ticket-link" href="http://examenpdd.local/tickets/1">1</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/2">2</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/3">3</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/4">4</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/5">5</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/6">6</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/7">7</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/8">8</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/9">9</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/10">10</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/11">11</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/12">12</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/13">13</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/14">14</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/15">15</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/16">16</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/17">17</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/18">18</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/19">19</a>
    <a class="ticket-link" href="http://examenpdd.local/tickets/20">20</a>
    <div class="clear"></div>
  </div>
</div>

4
  • Спасибо, это решает проблему с подсчетом отступа. А можно как-то динамически вычеслять ширину ticket-link в зависимости от ширины ticket-links. Чтобы слева и справа на экране (например 400px) был одинаковый отступ. То есть конец последней ячейки в ряду совпадал с концом родительского блока? imgur.com/a/epymk 9 апр 2018 в 16:42
  • извините, если хочу многого. просто хочу симетрии на всех экранах 9 апр 2018 в 16:45
  • @user2168735 можно делать на flex box, вот ссылка - wp-kama.ru/id_8045/flex-v-css.html#kcmenu 9 апр 2018 в 17:06
  • @user2168735 на основании шаблона который у вас думаю сделать так нельзя, по крайней мере я не знаю как, если, конечно не брать в расчёт javascript варианты. 9 апр 2018 в 17:10
0

Как вариант - можно примерно так сделать:

// просто для компактности примера 
let container = document.querySelector('#tickets .ticket-links'); 
for (let i = 2; i <= 40; i++) {
  container.insertAdjacentHTML('beforeend', `
    <a class="ticket-link" href="http://examenpdd.local/tickets/${i}">${i}</a>
  `); 
}
#tickets {
  --link-size: 52px; 
  min-width: 320px;
  max-width: 560px; 
  margin: auto; 
}

#tickets .ticket-links {
  display: inline-flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  text-align: center;
  padding: 5px; 
}

#tickets .ticket-link {
  flex: 0 0 var(--link-size); 
  height: var(--link-size); 
  margin: 5px; 
  line-height: var(--link-size); 
  box-sizing: border-box;
  background-color: #f7fcff; color: #0064c6;
  border: 1px solid #0064c6;
  text-decoration: none; 
}
<div id="tickets">
  <div class="ticket-links">
    <a class="ticket-link" href="http://examenpdd.local/tickets/1">1</a>
  </div>
</div>

Демо на JSbin.

0

Конечное решение получилось комбинированием ответов @Дмитрий Полянин и @yar85 . Какой ответ выбирать решением в таком случае?

Для проблемы с правым отступом я использую

width: calc(100% + 10px); 

как показал Дмитрий.

Для выравнивания ячеек по центру я использую flex как показал @yar85.

Результат:

введите сюда описание изображения

Код:

#tickets .ticket-links {
    width: calc(100% + 10px);
    width: -moz-calc(100% + 10px);
    width: -webkit-calc(100% + 10px);
    --link-size: 47px;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}

#tickets .ticket-links .ticket-link {
    flex: 0 0 var(--link-size);
    height: var(--link-size);
    line-height: var(--link-size);
    box-sizing: border-box;
    background-color: #f7fcff;
    border: 1px solid #0064c6;
    color: #0064c6;
    text-align: center;
    margin-right: 10px;
    margin-bottom:10px;
}

@media only screen and (max-width:600px){
    #tickets .ticket-links .ticket-link {
        --link-size: 52px;
    }
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.