Как сделать начальную высоту двух столбцов одинаковой?

Question

В моей демонстрации (http://jsfiddle.net/pdExf/864/) начальная позиция четвертого элемента выше, чем первая. Как это исправить?

Отрывок:

span { 
 
    margin-left: 14px; 
 
    flex: 1 1 auto; 
 
    overflow: 'hidden'; 
 
    word-wrap: break-word; 
 
    /* white-space: -moz-pre-wrap !important; */ /* Mozilla, since 1999 */ 
 
    white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
 
    white-space: -pre-wrap; /* Opera 4-6 */ 
 
    white-space: -o-pre-wrap; /* Opera 7 */ 
 
    white-space: pre-wrap; /* css-3 */ 
 
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 
 
    word-break: break-all; 
 
    white-space: normal; 
 
    background-color: yellow; 
 
} 
 

 
label { 
 
    box-sizing: border-box; 
 
    background: white; 
 
    color: black; 
 
    padding: 10px; 
 
    margin: 10px 10px 20px 10px; 
 
    display: flex; 
 
    border: 1px solid black; 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
} 
 

 
ul { 
 
    display: inline-flex, flex: 1 1 auto; 
 
    flex-wrap: wrap; 
 
    margin: 10px 0px 0px 10px; 
 
    column-count: 2; 
 
    column-gap: 20px; 
 
} 
 

 
div { 
 
    height: 130px; 
 
    background-color: lightblue; 
 
    overflow: scroll; 
 
} 
 

 
li { 
 
    display: inline; /* want labels to display left-to-right */ 
 
    background-color: green; 
 
}

<div> 
 
    <ul> 
 
    <li> 
 
     <label> 
 
      <input type="checkbox"/> 
 
      <span > 1-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span> 
 
      </label> 
 
    </li> 
 
    <li> 
 
     <label> 
 
      <input type="checkbox"/> 
 
      <span> 2-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span> 
 
      </label> 
 
    </li> 
 
    <li> 
 
     <label> 
 
      <input type="checkbox"/> 
 
      <span> 3-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span> 
 
      </label> 
 
    </li> 
 
    <li> 
 
     <label> 
 
      <input type="checkbox"/> 
 
      <span> 4-very_short_word </span> 
 
      </label> 
 
    </li> 
 
    <li> 
 
     <label> 
 
      <input type="checkbox"/> 
 
      <span> 5-medium_length_word </span> 
 
      </label> 
 
    </li> 
 
    <li> 
 
     <label> 
 
      <input type="checkbox"/> 
 
      <span> 6-still_no_spaces </span> 
 
      </label> 
 
    </li> 
 
    <li> 
 
     <label> 
 
      <input type="checkbox"/> 
 
      <span> 7-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span> 
 
      </label> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

Я не знаю, как это будет выглядеть, когда применяется, но я видел способ преобразования столбцов с помощью CSS, чтобы использовать свойство отображения для использования таблицы -колонка и все внутри нее, которые вы хотите отображать: table-cell. В этом примере я видел использованную таблицу-строку. Я уверен, что он может применяться таким же образом для вашей проблемы.

устанавливаемых сотовое был так:

.payment-col{ 
    width:50%; 
    position:relative; 
    display:table-cell; 
    vertical-align:top; 
    padding:10px; 
    box-sizing: border-box; 
} 
.trcontainer{ 
display:table-row; 
display:block; 
} 

HTML, был так:

<div class="trcontainer"> 
    <div class="payment-col" id="paymentinput-col"> 
     <!-- insert columned items --> 
    </div> 
</div> 

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

Answer 2

span { 
    margin-left: 14px; 
    flex: 1 1 auto; 
    overflow: 'hidden', 
    word-wrap: break-word; 
    /* white-space: -moz-pre-wrap !important; */ /* Mozilla, since 1999 */ 
    white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
    white-space: -pre-wrap;  /* Opera 4-6 */ 
    white-space: -o-pre-wrap; /* Opera 7 */ 
    white-space: pre-wrap;  /* css-3 */ 
    word-wrap: break-word;  /* Internet Explorer 5.5+ */ 
    word-break: break-all; 
    white-space: normal; 
    background-color: yellow; 
} 

label { 
    box-sizing: border-box; 
    background: white; 
    color: black; 
    padding: 10px; 
    /*margin: 10px 10px 20px 10px;*/ 
    display: flex; 
    border: 1px solid black; 
    -webkit-column-break-inside: avoid; 
    page-break-inside: avoid; 
    break-inside: avoid; 
} 

ul { 
    display: inline-flex, 
    flex: 1 1 auto; 
    flex-wrap: wrap; 
    margin: 10px 0px 0px 10px; 
    column-count: 2; 
    column-gap: 20px; 
} 

div { 
    height: 130px; 
    background-color: lightblue; 
    overflow: scroll; 
} 

li { 
    display: inline; // want labels to display left-to-right 
    background-color: green; 
    margin: 20px 10px 10px; // add margin here 
}