Question

我尝试使用＆＃34; 2列创建DIV＆＃34;文本。

所以我使用了column-xxx属性，但是使用＆＃34; auto＆＃34;似乎没有像预期的那样表现。第一列应该在第二列之前填满，而不是平衡。

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

任何想法为什么＆＃34; auto＆＃34;使用列填充属性不能正常工作？

Answer 1

为height:100%

设置#feuillet

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

请试试下面的代码。

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

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

因为这是浏览器的默认样式，所以它影响了第1列。这就是为什么我们设置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>

为什么列填充属性不起作用？

2 个答案: