使用具有css column-count属性的段落元素展开div的宽度

时间:2017-07-10 21:38:41

标签: html css css3 flexbox css-multicolumn-layout

我有一个段落元素。该段有一个column-count css属性。我试图从我的段落元素中创建我的列,并扩展其父容器的宽度。

您可以在此处查看问题演示:https://codepen.io/Fallenstedt/pen/JJvyxe

父容器(粉色框)的宽度不会扩大。段落内容从粉红色框中掉出来。

有没有办法将段落元素的宽度传递给父容器,粉红色框?

此预览最好在全屏幕上查看。

    html {
      background-color: black;
      color: white;
    }
    
    .green {
      border: 2px solid green;
    }
    
    .red {
      border: 5px dashed red;
      padding: 10px;
    }
    
    .pink {
      border: 2px solid pink;
      pardding: 2px;
    }
    
    .blue {
      border: 2px solid blue;
    }
    
    .container {
      height: 250px;
      width: 90%;
    }
    
    .scrolling-container {
      height: inherit;
      width: 100%;
      overflow-x: scroll;
    /*   overflow-y: hidden; */
      display: flex;
    }
    
    .item-container {
      display: flex;
      height: 210px;
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: wrap;
      margin: auto;
    }
    
    .vertical-lr {
      writing-mode: vertical-lr;
    }
    
    .item {
      writing-mode: initial;
      height: 60px;
      width: 250px;
    }
    
    .story-container {
      height: inherit;
    }

    .story {
      height: 100px;
      font-size: 14px;
      width: 100%;
      column-count: 2;
      column-width: 200px; 
    }
<div class="container red">
      <div class="scrolling-container blue">
        <div class="item-container vertical-lr pink">
          <div class="item green"></div>
          <div class="item green"></div>
          <div class="item green"></div>
          <div class="item green"></div>
          <div class="item green"></div>
          <div class="item green"></div>
          <div class="item green"></div>
        </div>
        <div class="item-container  pink">
          <div class="story-container">
            <h1>Cool Story</h1>
            <p class="story">
              Leave it to Run the Jewels to find the connection between psychedelic drugs and systemic disorder. The new video for "Legend Has It," the first from the duo's third LP RTJ3, finds Killer Mike and El-P tripping on acid in a police lineup alongside a rotating cast of unusual suspects: a nun, an "innocent" little girl, a fireman, even a clown-faced police officer.
              Directed by Brian Beletic, the treatment intentionally "plays with the theme of guilty until proven innocent," he says. "We live in a world where the stronger the truth the greater the opposition. In this story EL-P and Killer Mike are in a police lineup and the cards are stacked heavily against them. But why is that?"
              Leave it to Run the Jewels to find the connection between psychedelic drugs and systemic disorder. The new video for "Legend Has It," the first from the duo's third LP RTJ3, finds Killer Mike and El-P tripping on acid in a police lineup alongside a rotating cast of unusual suspects: a nun, an "innocent" little girl, a fireman, even a clown-faced police officer.
            </p>
          </div>
        </div>
      </div>
    </div>

0 个答案:

没有答案