2列の開始高さを同じにする方法は？

Question

私のデモ（http://jsfiddle.net/pdExf/864/）では、4番目の要素の開始位置が最初の要素の開始位置よりも高くなっています。これをどうやって解決するのですか？

スニペット：

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で列を変換する方法を見ました-columnとその中に表示したいすべてのもの：table-cell。この例では、テーブル行を使用していました。私はそれがあなたの問題に同じように適用できると確信しています。

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

は、この情報がお役に立てば幸いです：HTMLはこのようなものだった

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

：

CSSはこのようなものでした。

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 
}