Horizontal CSS columns with headings



  • How can horizontal columns with fixed headings be located in front of each text block? The number of text blocks is unknown, as is the number of it in advance. The height and width of the container are fixed. Scrulling only horizontal

    Using CSS properties Columns and display: inline-block

    I'd like to tell you how this violin is: скриншот желаемого результата If there was no room for the text, it would be moved to the next column and the next text would move.

    But it turns out that the next bloc of the text doesn't know that the previous one was stretched into two columns, and placed right over the text.

    Example https://jsfiddle.net/1x22mtkt/2/

    p {
      margin: 0;
    }
    

    .container {
    outline: 1px dotted gray;
    height: 200px;
    width: 400px;
    white-space: nowrap;
    overflow-x: auto;
    }

    .column {
    outline: 1px dotted green;
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    column-width: 100vw;
    width: min-content;
    min-width: 50%;
    height: 100%;
    }

    .header {
    column-span: all;
    white-space: nowrap;
    }

    <div class="container">
    <div class="column">
    <h2 class="header">Lorem ipsum dolor sit..</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, dicta aut a at sunt quasi aspernatur. Ullam porro, consequatur est quo voluptatum atque. Delectus, dicta, saepe? Delectus sapiente officiis soluta maiores voluptatum voluptates culpa. Libero consectetur aliquid temporibus, dignissimos</p>
    </div>

    &lt;div class="column"&gt;
        &lt;h2 class="header"&gt;Lorem&lt;/h2&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, explicabo.&lt;/p&gt;
     &lt;/div&gt;
     
    &lt;div class="column"&gt;
        &lt;h2 class="header"&gt;Lorem&lt;/h2&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/p&gt;
     &lt;/div&gt;
     
    &lt;div class="column"&gt;
        &lt;h2 class="header"&gt;Lorem&lt;/h2&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/p&gt;
     &lt;/div&gt;
    

    </div>

    Any idea?



  • A little cautious, but the required result has been achieved

        p {
      margin: 0;
    }
    

    .container {
    outline: 1px dotted gray;
    height: 200px;
    width: 400px;
    white-space: nowrap;
    overflow-x: auto;
    }

    .column {
    outline: 1px dotted green;
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    column-width: 100vw;
    width: min-content;
    min-width: 50%;
    height: 100%;
    }

    .scroll {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    width: min-content;
    min-width: 50%;
    height: 100%;
    overflow-x: scroll;
    }

    .header {
    column-span: all;
    white-space: nowrap;
    }

        <div class="container">
    <div class="scroll">
    <div class="column">
    <h2 class="header">Lorem ipsum dolor sit..</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, dicta aut a at sunt quasi aspernatur. Ullam porro, consequatur est quo voluptatum atque. Delectus, dicta, saepe? Delectus sapiente officiis soluta maiores voluptatum voluptates culpa. Libero consectetur aliquid temporibus, dignissimosLorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, dicta aut a at sunt quasi aspernatur. Ullam porro, consequatur est quo voluptatum atque. Delectus, dicta, saepe? Delectus sapiente officiis soluta maiores voluptatum voluptates culpa. Libero consectetur aliquid temporibus, dignissimos</p>
    </div>
    </div>
    <div class="scroll">
    <div class="column">
    <h2 class="header">Lorem</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, explicabo.</p>
    </div>
    </div>
    <div class="scroll">
    <div class="column">
    <h2 class="header">Lorem</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, explicabo.</p>
    </div>
    </div>
    </div>


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2