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