Блог

У меня есть два элемента, которые я хочу разместить в одной строке. В настоящее время у меня есть:

 #element 1 {
  display:inline-block;
  margin-right:15px;
}

#element 2 {
  display:inline-block;
}
  

Это работает, НО всякий раз, когда элемент 2 (текст) содержит более одной строки, все теряет свое положение. Я хочу, чтобы второй элемент всегда оставался в одном месте и не форматировался, когда элемент 2 содержит более двух строк.

Смотрите пример рисунка. Обратите внимание, что в первой строке это выглядит нормально, но во второй строке, когда текст занимает более двух строк, он начинает выглядеть плохо. Смотрите на рисунке 2, как я хочу, чтобы это тоже выглядело.

Я предпочитаю flexbox при создании подобных структур. Лучший способ — использовать ul в качестве контейнера, а затем сделать так, чтобы каждая строка была размером с содержимое абзаца. Не знаю, как у вас с кодом, но в этом примере строка разделена промежутком.

 <ul class="rows">
  <li><span>01</span>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem</li>
  <hr>
  <li><span>01</span>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem</li>
  <hr>
</ul>
  

и тогда css или (scss) в этом случае будет выглядеть примерно так.

 .rows {
  margin: 0;
  padding: 0;

  li {
    text-decoration: none;
    list-style: none;
    margin-bottom: 10px;
    display: flex; 
    justify-content: space-around;
    width: 50%;

    span {
      margin-right: 20px;
    }
  }
}
  

написал краткий пример в codepen: https://codepen.io/anon/pen/jJBKeq

Существует несколько способов. CSS Flex — лучший вариант. Или use может использовать абсолютный номер позиции

HTML

 <ul>
    <li class="element-wrap">
        <div class="element-1">1</div>
        <div class="element-2>Lorem Ipsum Dummy text for any content</div>
    </li>
</ul>
  

CSS — Использование абсолютной позиции

 .element-wrap {
    position: relative;
    z-index: 0;
    padding-left: 50px; //This should be equal to width of first element.
}
.element-1 {
    position: absolute;
    left: 0;
    top: 0;
}
  

CSS — Использование FLEX

 .element-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.element-1 {
    width: 40px;//
}
  

Вы можете сделать это несколькими способами. Использование flex, использование сетки или использование абсолютного позиционирования. В этом примере число представляет собой содержимое, сгенерированное css с помощью counters() функции.

 ul {
  counter-reset: index;  
  padding: 0;
}

/* List element */
li {
  counter-increment: index; 
  width: 200px;
  min-height: 50px;
  display: flex;
  padding-bottom: 12px;
}


/* Element counter */
li::before {
  content: counters(index, ".", decimal-leading-zero);
  font-size: 1.5rem;
  font-weight: bold;
  flex-grow: 1;
  min-width: 50px;
}


/* Element separatin */

li   li {
  border-top: 1px solid gray;
  padding-top: 12px;
}  

 <ul>  
  <li> 
    lorem ipsumt dolor sit amet consecutor adipiscing lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li>
    lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li> 
    lorem ipsumt dolor sit amet consecutor adipiscing lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li>
    lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li> 
    lorem ipsumt dolor sit amet consecutor adipiscing lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li>
    lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li> 
    lorem ipsumt dolor sit amet consecutor adipiscing lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li>
    lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li>
    lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li>
    lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
</ul>