2
我正在尝试创建一个带有“2列”文本的DIV。为什么column-fill属性不起作用？
所以我使用的列XXX性，但列填充为“自动”设置似乎并没有像预期的那样。 第一列应该在第二列之前全部填满，而不是平等。
即使w3schools上的示例也没有按预期行事。
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-fill
这是我的html页面：
<html>
<body>
<script src="js/scripts.js"></script>
<div class="livre">
<div class="cahier">
<div id="tranche_g">
</div>
<div id ="feuillet">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum posuere orci nec imperdiet. Etiam erat sem, mollis non leo a, tincidunt posuere sapien. Cras fringilla venenatis aliquam. In euismod aliquet mi tincidunt condimentum. Donec metus lorem, tincidunt nec aliquet id, iaculis a elit. Fusce lectus justo, eleifend ut elit et, interdum finibus nisl. Mauris id enim porta, vulputate lectus a, sagittis eros. Curabitur in aliquam tortor. Sed a maximus est. Suspendisse enim massa, scelerisque vitae sagittis non, consectetur et velit. Vivamus placerat ligula a tortor efficitur mattis. Fusce eu arcu a metus rhoncus pretium in id elit. Nunc condimentum eleifend neque non vulputate. Integer varius scelerisque aliquam.</p>
</div>
<div id="tranche_d">
</div>
</div>
</div>
</body>
</html>
在这里，这是我的CSS代码：
/* CSS was previously reset with meyerweb code
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
body, html {height: 100%}
body{
background-color:Sienna;
}
.livre{
background-color: SaddleBrown;
max-width: 1000px;
margin: auto;
border-left: 2px solid black;
border-right: 2px solid black;
position:relative;
height: 100%;
}
.cahier{
background-color:NavajoWhite;
margin-left: 4%;
margin-right: 4%;
border-left: 1px solid grey;
border-right: 1px solid grey;
position: relative;
height: 100%;
width: 92%;
}
#tranche_g{
position:relative;
float:left;
width: 2%;
height: 100%;
}
#feuillet{
position:relative;
float: left;
width: 87%;
min-height: 100%;
border-left: 1px solid lightgrey;
border-right: 1px solid lightgrey;
background-color:Bisque;
padding-left: 1em;
padding-right: 1em;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 2em; /* Chrome, Safari, Opera */
-moz-column-gap: 2em; /* Firefox */
column-gap: 2em;
-webkit-column-rule: 1px solid; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid; /* Firefox */
column-rule: 1px solid;
-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;
}
#tranche_d{
position:relative;
float: right;
width: 10%;
height: 100%;
}
任何想法，为什么 “自动” 不能正常使用的列工作填充属性？
看起来你需要设置你设置列的元素一个固定的高度。所以这里用'height'替换'min-height' https://codepen.io/danield770/pen/RZwxjp – Danield