请问老师关于列

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div.one{
        width: 500px;
        height: 500px;
        columns: 4;
        column-rule:solid 10px red;
    }
   p{
    height: 500px;
   }
    
   /* div:hover{}*/
   
</style>
</head>
<body>

    <div class="one">
        <p>dfsafdsasdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>dsfaaaaaaaaaaaaaaaaa</p>
        <p>我是我是我是</p>
        <span>46874546578</span>
    </div>
    


</body>
</html>

请问老师我这列布局各个高度不一样？？以及为什么文字会盖在边框上？我的间隙明明大于边框啊。

请问老师这个列布局属性对于元素的布局有其他什么改变。比如说行内和块元素的本质改变了还是怎么样的？

hy_wang 2018-05-17

源自：CSS3多列布局 1-6 编程练习

收起

2回答

小于飞飞 2018-05-18 09:54:53

针对在回答区代码，建议如下：

通过控制台，高度都是500。所以各列高度不一样具体指？
文字覆盖，因为word-wrap: normal; 设置，可以修改 word-wrap:break-word; 允许长单词换行到下一行。
从运行结果看，显示4列，“为什么多了一列“具体指？

祝学习愉快，加油！

收起回答

提问者 hy_wang #1

请问老师我在firefox中测试我回答补充的代码，当p的高度很高时会变成5列多余一列在父元素只在且每一列文字的排序位置不同。请问这是怎么回事

2018-05-18 10:05:36
小于飞飞回复提问者 hy_wang #2

代码中规定了固定高度，那超出的部分会显示出来，就像一个格子如果装的东西多了，也会溢出，所以在使用该知识时，可以不设置具体的高度，如果必须要设置高度，注意内容的多少。希望解答你的疑惑，祝学习愉快。

2018-05-18 15:58:35

提问者 hy_wang 2018-05-17 21:16:43

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div.one{
        width: 500px;
        height: 500px;
        columns: 4;
        column-rule:solid 10px red;
        column-gap: 50px;
        word-wrap: normal;
    }
   p{
    height: 500px;
   }
   span{
    display: block;
    width: 50px;
    height: 500px;
   }
    
   /* div:hover{}*/
   
</style>
</head>
<body>

    <div class="one">
        <span>dfsafdsasdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
        <p>dsfaaaaaaaaaaaaaaaaa</p>
        <p>我是我是我是</p>
        <span>46874546578</span>
    </div>
    


</body>
</html>

以及老师当这里多列布局会超脱出父元素？

收起回答