如何使两列的起始高度相同？答案

【问题标题】：How to make the starting height of two columns the same?如何使两列的起始高度相同？
【发布时间】：2017-08-25 04:17:37
【问题描述】：

在我的演示（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>

【问题讨论】：

试试 float:left; ?
@TheGenieOfTruth 在哪个标签下？
李，我会说。不太确定。

标签： css css-multicolumn-layout

【解决方案1】：

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
}

【讨论】：

他们仍然没有从相同的高度开始

【解决方案2】：

我不确定应用时的外观，但我看到了一种使用 css 转换列的方法，以使用 display 属性来使用 table-column 以及其中您想要显示的所有内容：table-cell .我看到的这个例子使用了表格行。我相信它可以以同样的方式应用于您的问题。

css 是这样的：

.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>

希望这会有所帮助。

【讨论】：