为什么 column-fill 属性不起作用？

Question

我正在尝试创建带有“2 列”文本的 DIV。

所以我正在使用 column-xxx 属性，但是使用 "auto" 设置的 column-fill 似乎没有按预期运行。第一列应该在第二列之前填满，而不是同样平衡。

即使是 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%;
}

知道为什么 "auto" 不能正常使用 column-fill 属性吗？

Answer 1

请你试试下面的代码。

在下面的代码中我只添加了这个东西

p{    
    -webkit-margin-after: 0em;
    -webkit-margin-before: 0em;
}

因为这是浏览器的默认样式，所以它会影响第一个 column.So 这就是我们设置 0em 而不是 1em 的原因。

    /* 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%;
}
p{    
 -webkit-margin-after: 0em;
    -webkit-margin-before: 0em;
}

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

Answer 2

为#feuillet设置height:100%

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%;
  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%;
}

<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. </p>
        
      </div>
      <div id="tranche_d">
      </div>
    </div>
  </div>
</body>

</html>

为什么 column-fill 属性不起作用？

Why is column-fill property not working?

css

css-multicolumn-layout

为什么 column-fill 属性 不起作用？

Why is column-fill property not working?

css

css-multicolumn-layout

为什么 column-fill 属性不起作用？