Блог

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

 .elements-list {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  list-style: none outside;
}

.list-entry {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  list-style: none outside;
  padding-right: 8px;
  max-width: 200px;
}

span.single-detail span {
    letter-spacing: 1px;
    display: -webkit-inline-box;
    display: inline-flex;
    display: -ms-inline-flexbox;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}  

 <ul class="elements-list">
  <li class="list-entry">
    <span class="single-detail">
      <span>Abgabefrist:</span>
      <span>22.02.2222</span>
    </span>
    <span class="single-detail">
      <span>Entlohnung:</span>
      <span>2.222,00 €</span>
    </span>
  </li>
  <li class="list-entry">
    <span class="single-detail">
      <span>Abgabefrist:</span>
      <span>22.02.2222</span>
    </span>
    <span class="single-detail">
      <span>Entlohnung:</span>
      <span>20.222,00 €</span>
    </span>
  </li>
  <li class="list-entry">
    <span class="single-detail">
      <span>Abgabefrist:</span>
      <span>22.02.2222</span>
    </span>
    <span class="single-detail">
      <span>Entlohnung:</span>
      <span>22.000.222,00 €</span>
    </span>
  </li>
</ul>  

Комментарии:

1. Думаю, для этого вам понадобится js — css не сообщит вам, переносится ли текст

2. Хм, это верно. Поэтому мне, возможно, потребуется выяснить в JS, завершен ли элемент. Если да, мне нужно добавить класс, например, обернутый ко всем элементам, который заставляет все переносить. Что вы думаете по этому поводу?

3. Если вы не используете серверный язык для заполнения этого — вы могли бы проверить длину евро, если они превышают определенную длину, которая вызывает перенос, затем добавьте класс в контейнер (если вы не хотите делать это с помощью js)

4. Это хорошая идея! Но когда у меня полностью открыт веб-сайт, я хочу показать все встроенным, но когда вы сворачиваете окно, мне нужно выполнить перенос при переносе. Поэтому добавьте класс, если euro bigger x не является окончательным решением. Может быть, я могу проверить в js изменение размера окна, если текст переносится? Или это для замедления?

5. В качестве альтернативы, просто разрывайте строку каждый раз. Преимущества: согласованность, устранение этой проблемы и работа над чем-то другим.

Ответ №1:

 window.addEventListener('DOMContentLoaded', function(){
  var rows = document.querySelectorAll('.row');
  // First loop to find which line is the widest.
  var widest = 0;
  for(r=0; r<rows.length; r  ) {
    console.log(r);
    var width = rows[r].querySelector('.col1').offsetWidth   
                rows[r].querySelector('.col2').offsetWidth;
                
    if (width > widest) widest = width;
  }
  // second loop to set the width of col2, so they all
  // get the same width.
  for(r=0; r<rows.length; r  ) {
    rows[r].querySelector('.col2').style.width = 
      (widest - rows[r].querySelector('.col1').offsetWidth)   'px';
  }
});  

 /* This is needed */
.col2 {
  display: inline-block;
}

/* This is just for show */
.col1 {
  padding-right: 1em;
}

span {
  box-sizing: border-box;
  border: 1px solid grey;
}  

 <!-- hacky div/span table, since there is no HTML in the question -->
<div class="row"><span class="col1">The time</span><span class="col2">2018-12-22 12:34</span></div>
<div class="row"><span class="col1">Total price here</span><span class="col2">$ 5,-</span></div>  

Комментарии:

1. Я пробовал это, но кажется очень странным. Это propperley не работает. Теперь я добавил кое-что из своего кода. Это перестройка, но структура и CSS те же. Когда вы запустите его, вы увидите проблему. Итак, если какой-то элемент переносится, мне нужно установить, например, класс, переносимый во все из них, который переносит их автоматически — возможно.

2. Я вижу, я думаю, что я не до конца понял вопрос. Я думал, вы хотели, чтобы значение после Abgabefrist и Entlohnung переносилось одновременно, но на самом деле у вас получилось три таких столбца. Тогда это немного сложнее, потому что, как только одна из них завершится, остальные поместятся. Я не знаю, всегда ли у вас есть точные 3 элемента списка, и могут ли они также переноситься.. Подобные вещи значительно усложнили бы задачу.

3. Возможно, лучшим решением тогда было бы сделать его немного менее гибким. Если не переносить всегда , как предложил Уэсли Марч, по крайней мере переносить всегда, если размер вашего экрана меньше некоторого заранее определенного значения. Таким образом, у вас будет широкое отображение на широких экранах, но все, что имеет более низкое разрешение, будет перенесено, даже если в этом, возможно, строго говоря, нет необходимости. Если длина ваших текстов будет оставаться в определенных границах (а поскольку это числа, похоже, что так и будет), это может привести к приличному результату без особых усилий.

4. Я тоже пробовал это, но дело в том, что когда я уменьшаю размер браузера, макет меняется с 4 на 2 столбца, поэтому в этом случае он снова подходит. И когда я сейчас работаю с @media, элементы также переносятся в макет из двух столбцов. Итак, я думаю проверить, завернут ли один из элементов, если да, добавить класс ко всем элементам, который содержит столбец flex-direction: . Может быть, это возможно?

5. Я думаю, что это возможно. Единственная проблема заключается в том, что если вы снова сделаете браузер шире, они не будут разворачиваться, если вы не продолжите проверять (в каком-нибудь скрытом элементе), достаточно ли широка страница, чтобы снова отображать неперевернутые элементы. Или просто игнорировать этот факт и сохранять их закрытыми, если бы пользователи изменяли размер своих браузеров подобным образом, это, вероятно, тоже не имело бы большого значения.

Ответ №2:

Комментарии:

1. Но в этом случае элемент переполняет родительский элемент или нет?

2. да, так и будет, если ни у одного родительского элемента нет свойства max-width или фиксированного, вы также можете использовать это свойство, display: inline или display: inline-block; таким образом родительский элемент будет принимать ширину своего содержимого

3. Если я установлю максимальную ширину, мой адаптивный макет больше не будет адаптивным

Ответ №3:

 .dates div {
  display: flex;
  flex-wrap: wrap;
}  

 <div class="main">
  <div class="dates">
  <div><span>abgabefrist:</span> 
  <span>01/01/0001</span></div>
  <div><span>abgabefrist:</span> 
  <span>02/02/0002</span></div>
    </div>
  <div class="btns">
    <button> Button One</button>
    <button> Button Two </button>
  </div>
</div>  

Комментарии:

1. Они переносятся независимо, а не вместе. Ну, они действительно объединяются, потому что в вашем примере обе строки имеют одинаковую длину.

2. Эй, GolezTrol, ты абсолютно прав. Кажется, я немного торопился, когда писал это, но логика остается той же (отличается только макет).