Я работаю с css из двух секций колонки, секции первая и секции буксировки. Используя css Column, я хотел бы, чтобы первый столбец первого раздела занимал доступное пространство первого столбца без переполнения во второй столбец, как это

enter image description here

Содержимое с красной подсветкой должно продолжаться в первом столбце, поскольку при печати документа предварительного просмотра под столбцом первого раздела остается много свободного места, поэтому его содержимое не должно вообще перетекать в столбец второго раздела.

.two-column {
  -webkit-columns: 100px 2;
  /* Chrome, Safari, Opera */
  -moz-columns: 100px 2;
  /* Firefox */
  columns: 100px 2;
  -webkit-column-gap: 40px;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 40px;
  /* Firefox */
  column-gap: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" crossorigin="anonymous"></script>

<div class="container">
  <div class="two-column">
    <div class="row">
      <!-- SECTION ONE -->
      <h1>Section One</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
    </div>
    <div class="row">
      <!-- SECTION TOW -->
      <h1>Section Two</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
      </p>
    </div>
  </div>
</div>

Может быть другое решение, например, использование flex-box бок о бок, но мне нужно добиться этого, используя только CSS Column Style. Как я мог это сделать? Благодарю.

0
Houy Narun

3 ответа

Проблема, кажется, плохо используется в начальной загрузке. Классы в bootstrap: строка по умолчанию горизонтальна, так что вы можете использовать это и определить ширину столбца, используя класс начальной загрузки: col-md-6 (половина ширины).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" crossorigin="anonymous"></script>

<div class="container">
	<div class="row">
	<div class="col-md-6">
      <!-- SECTION ONE -->
      <h1>Section One</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
      </p>
    </div>
    <div class="col-md-6">
      <!-- SECTION TOW -->
      <h1>Section Two</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
      </p>
    </div>
</div>
</div>
</body>

Вы можете предоставить CSS стиль «переполнение: скрытый», чтобы любое переполнение данных не было видно.

Это основной код для 2 столбцов, использующих flex. У вас есть класс row , который является классом начальной загрузки, который может конфликтовать с вашим CSS.

.my-row {
  display: flex;
  flex-wrap: wrap;
}

.my-col {
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}
<div class="my-row">
  <div class="my-col"> Put your col here</div>
  <div class="my-col"> Put your second col here</div>
</div>

2 столбца с вашим содержимым без переполнения

enter image description here

.my-row {
  display: flex;
  flex-wrap: wrap;
}

.my-col {
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  background-color: gray;
  margin: 3px;
}
<div class="my-row">
  <div class="my-col">
    <!-- SECTION ONE -->
    <h1>Section One</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias quas iste debitis animi aspernatur, deleniti nam? Vitae iste quia placeat? Ducimus ratione quod impedit ipsam distinctio et odit quidem.
    </p>
  </div>
  <div class="my-col">
    <!-- SECTION TOW -->
    <h1>Section Two</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui vel quia, facere numquam vitae atque, neque doloremque cumque eos porro. Dolorum hic iusto quo, numquam eius magnam illum dignissimos id.
    </p>
  </div>
</div>
58516602