Замена колонок в HTML5, которая делит страницу на части и не переносит текст из одной в другую, а ведёт текст до конца?

Question

Замена колонок в HTML5, которая делит страницу на части и не переносит текст из одной в другую, а ведёт текст до конца?

Государственная почта Усово-Шимкии Ученик (145), закрыт 2 дня назад

Колонки, если в них много текста написать, перенесутся. А мне нужно, чтобы было 4 разных раздела со своими текстами (допустим, в одном разделе сказка про курочку рябу, а в другом - текст песни моргена)
Работаю в uKit.

Answer 1

Четыре равные части по горизонтали

 <!DOCTYPE html> 
<html lang="ru"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Четыре равные части по горизонтали</title> 
    <style> 
        .container { 
            display: grid; 
            grid-template-columns: repeat(4, 1fr);  
            gap: 20px;  
        } 
        .column { 
            border: 1px solid #ccc;  
            padding: 10px; 
        } 
    </style> 
</head> 
<body> 
    <div class="container"> 
        <div class="column"> 
            <p>Ваш текст</p> 
        </div> 
        <div class="column"> 
            <p>Ваш текст</p> 
        </div> 
        <div class="column"> 
            <p>Ваш текст</p> 
        </div> 
        <div class="column"> 
            <p>Ваш текст</p> 
        </div> 
    </div> 
</body> 
</html>

4 равные части с ползунками в колонках

 <!DOCTYPE html> 
<html lang="ru"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>4 равные части (2x2) с ползунком</title> 
    <style> 
        .container { 
            display: grid; 
            grid-template-columns: repeat(2, 1fr);  
            grid-template-rows: repeat(2, 1fr);  
            gap: 20px;  
            height: 100vh;  
        } 
        .column { 
            border: 1px solid #ccc; 
            padding: 10px; 
            overflow-y: auto; 
        } 
    </style> 
</head> 
<body> 
    <div class="container"> 
       <div class="column"> 
      <p>Ваш текст</p> 
      </div> 
      <div class="column"> 
           
       <p>Ваш текст</p> 
       </div> 
       <div class="column"> 
         <p>Ваш текст</p> 
        </div> 
        <div class="column"> 
         <p>Ваш текст</p> 
        </div> 
    </div> 
</body> 
</html>

.

Answer 2

Где-где ты работаешь? Если не знаешь, как код формируется, то вряд-ли тебе кто-то поможет. Разметку от руки сделай и параметры тоже вручную задай. уКит. Смешно