3

Как можно расположить горизонтальные колонки с фиксированным заголовков перед каждым текстовом блоком? Количество текстовых блоков, как и количество текста в нём заранее неизвестно. Высота и ширина контейнера фиксирована. Скроллинг только горизонтальный

Использую CSS свойства Columns и display: inline-block.

Хочу распооложить как на этом скриншоте: скриншот желаемого результата Чтобы, если места для текста не хватает, он переносился на следующую колонку, а следующий за ним текст подвинулся.

Но получается, что следующий блок текста не знает, о том, что предыдущий растянулся на 2 колонки, и накладывается прямо поверх текста.

Пример jsFiddle

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>
    
    <div class="column">
        <h2 class="header">Lorem</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, explicabo.</p>
     </div>
     
    <div class="column">
        <h2 class="header">Lorem</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
     </div>
     
    <div class="column">
        <h2 class="header">Lorem</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
     </div>
</div>

Есть какие-нибудь идеи?

1 ответ 1

1

Немного косячно, но требуемый результат достигнут

    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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.