在我的演示(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>
答案 0 :(得分: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
}
答案 1 :(得分:0)
我不确定应用时会看起来如何,但我看到了一种使用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>
希望这有帮助。