Свернуть поля по краям экрана - PullRequest
Новая
       11

Свернуть поля по краям экрана

0 голосов
/ 20 мая 2018

Я пытаюсь создать адаптивный макет, который объединяет элементы в разделе в несколько строк по мере необходимости на маленьких экранах.Текущее поведение работает, но оно не использует все горизонтальное пространство.Как я могу отключить правое поле, если элемент является последним в его строке? 

span {
 white-space: nowrap;
 display: inline-block;
 margin-bottom: 1em;
 margin-right: 10em;
}
<h1>Section 1</h1>
<span>Item 1</span>
<span>Item 2</span>
<h1>Section 2</h1>
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<h1>Section 3</h1>
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
<span>Item 6</span>

Ответы [ 2 ]

0 голосов
/ 20 мая 2018

Возможное решение - обернуть каждый блок в тег section с помощью overflow: hidden.Затем оберните элементы в элемент div, ширина которого равна 100% + один отступ справа, например: width: calc(100% + 10em);.

Вот полный пример: 

section {
  border: 1px dashed coral;
  overflow: hidden;
}

.items {
  border: 1px solid green;
  width: calc(100% + 10em);
}

span {
 white-space: nowrap;
 display: inline-block;
 margin-bottom: 1em;
 margin-right: 10em;
 
 border:1px solid pink;
}
<section>
  <h1>Section 1</h1>
  
  <div class="items">
    <span>Item 1</span>
    <span>Item 2</span>  
  </div>
</section>

<section>
  <h1>Section 2</h1>
  
  <div class="items">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
    <span>Item 4</span>
  </div>
</section>

<section>
  <h1>Section 3</h1>
  
  <div class="items">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
    <span>Item 4</span>
    <span>Item 5</span>
    <span>Item 6</span>
  </div>
</section>
0 голосов
/ 20 мая 2018

Если есть возможность изменить html, вы можете попробовать это: 

<section>
  <h1>Section 1</h1>
  <span>Item 1</span>
  <span>Item 2</span>
</section>
<section>
  <h1>Section 2</h1>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
  <span>Item 4</span>
</section>
<section>
  <h1>Section 3</h1>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
  <span>Item 4</span>
  <span>Item 5</span>
  <span>Item 6</span>
</section>

И использовать псевдоселектор css: последний в своем роде: 

span {
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 1em;
  margin-right: 10em;
}
span:last-of-type {
  margin-right: 0;
}

Подробнее:https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type

...