Question

我使用css创建了3列，我想在所有浏览器中跨越3列的同一div中放置一些文本（Firefox给我带来了麻烦。）

这是我创造的小提琴： https://jsfiddle.net/syyar62b/3/

#left-area {
    -moz-column-count: 3;
    column-count: 3;
    -moz-column-gap: 60px;
    }
.span-3-columns {
    column-span: all;
    -webkit-column-span: all;
    -moz-column-span: all;   
    }  

<div id="left-area">
<div class="span-3-columns">
I want this to go across the 3 colums at the top, yet remain inside of the left-area id.
</div>
content content content content content content content content 
</div>

我正在寻找的内容的文字表示如下：

This line is spans all 3 columns
content      content     content

Answer 1

首先，你的小提琴中有一个拼写错误，它应该是.span-3-columns而不是.span-3-colums。

您可以使用：

.span-3-columns {
    column-span: all;
    -webkit-column-span: all;
    -moz-column-span: all;
}

注意：截至2016年12月29日，Firefox仍然不支持。

Answer 2

更新：这有效，但Bla的答案更好......

更新＃2 ：看起来Bla的答案在Firefox下不受支持。所以，我想我的解决方案毕竟还可以：P

您可以将其包装在容器元素position: relative中，并在顶部填充，然后绝对将span-3-columns块放在填充内：

＆＃13;

.left-area-container {
  position: relative;
  padding-top: 4em;
}
#left-area {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 60px;
     -moz-column-gap: 60px;
          column-gap: 60px;
}

.span-3-columns {
  background-color: #ffe;
  color: red;
  height: 4em;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

＆＃13;

<div class="left-area-container">
  <div id="left-area">
    <div class="span-3-columns">
      I want this to go across the 3 colums at the top, yet remain inside of the left-area id.
    </div>
    1content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content
  </div>
</div>

＆＃13;

Answer 3

您可以尝试使用CSS 3规范column-gap＆amp; column-width可以定义列之间的差距。

热门浏览器已开始支持相同的内容（-webkit-column-width，-webkit-column-gap，-moz-column-width，-moz-column-gap均受支持。

因此宽度和间隙可以用以下方式写出：

#columns {
  -webkit-column-width: 220px;
  -webkit-column-gap: 15px;
  -moz-column-width: 220px;
  -moz-column-gap: 15px;
  column-width: 220px;
  column-gap: 15px;
}

我做了一个小提琴，展示了一个有效的例子。适用于Chrome，Firefox和Safari。

https://jsfiddle.net/nashcheez/3cf9qrap/3/

Answer 4

@vince你是对的，该解决方案涉及一些js，而且问题是Firefox中报告的错误。

关于添加一些js的最后评论，正是我的朋友所做的。 js监视跨越的div的大小，然后调整主容器的填充。

您可以在行动中看到它并在此处查看来源： http://codepen.io/gpercifield/pen/PbMQmO/

HTML

<body onresize="myFunction()">
<div class="left-area-container" id="main">
<div id="left-area">
    <div class="span-3-columns" id="spanDiv">
        This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
        <hr>
    </div>
    <div class="box" style="height:194px;">asdf</div> <div class="box" style="height:264px;">asdf</div> <div class="box" style="height:134px;">asdf</div> <div class="box" style="height:379px;">asdf</div> <div class="box" style="height:198px;">asdf</div> <div class="box" style="height:187px;">asdf</div> <div class="box" style="height:125px;">asdf</div> <div class="box" style="height:364px;">asdf</div> <div class="box" style="height:378px;">asdf</div> <div class="box" style="height:357px;">asdf</div> <div class="box" style="height:204px;">asdf</div> <div class="box" style="height:243px;">asdf</div> <div class="box" style="height:58px;">asdf</div> <div class="box" style="height:135px;">asdf</div> <div class="box" style="height:187px;">asdf</div> <div class="box" style="height:383px;">asdf</div> <div class="box" style="height:394px;">asdf</div> <div class="box" style="height:213px;">asdf</div> <div class="box" style="height:55px;">asdf</div> <div class="box" style="height:48px;">asdf</div> 
</div>
</div>
<script>
    /*Function watches the height of the spanned div and then adjusts the padding in the main div*/
function myFunction() {
   var clientHeight = document.getElementById('spanDiv').offsetHeight;
   console.log(clientHeight);
   newpadding = clientHeight + 'px';
   console.log(newpadding);
   document.getElementById('main').style.paddingTop  = newpadding;
}
myFunction();
</script>

</body>

CSS

#left-area {
  -moz-column-count: 3;
  column-count: 3;
  -moz-column-gap: 60px;
  padding: 0px 10px;
}

.span-3-columns {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.box{
    background-color:rebeccapurple;
    width: 100%;
    padding: 4px;
    margin: 0px 0px 10px;
}

.left-area-container {
  position: relative;
}

@media (min-width: 401px) and (max-width: 700px) {
    #left-area {
      -moz-column-count: 2;
      column-count: 2;
      -moz-column-gap: 30px;
    }

    .box{
        background-color:forestgreen;
    }
}

@media (max-width: 400px) {
    #left-area {
      -moz-column-count: 1;
      column-count: 1;
    }

    .box{
        background-color:cadetblue;
    }
}

调整窗口大小并观察其运行情况。

如何跨越css列

4 个答案: