CSS разрывает дочерний элемент после n-го

ProgramBox

CSS разрывает дочерний элемент после n-го

Post author:admin
Запись опубликована:3 декабря, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я пытаюсь разбить определенное количество элементов наполовину.

Например:

У меня есть оболочка вокруг многих элементов, и я хочу разбить их на два столбца.

 body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}

.flex-container {
flex-basis: 75%;
}

.flex-con {
  flex-basis: 25%;
}

#bottom {
    max-width: 100%;
    color: #fff;
    background-color: #205BA1;
    display: flex;
    padding: 1rem;
    margin-right: 0 !important;
    flex-wrap: wrap; 
    }
    
    .item:nth-child(5n) {
        page-break-after: always;
    }

 <div id="bottom">
    <div class="flex-container">
        <div id="wrapper">
            <div class="item">a</div>
            <div class="item">b</div>
            <div class="item">c</div>
            <div class="item">d</div>
            <div class="item">e</div>
            <div class="item">f</div>
            <div class="item">g</div>
            <div class="item">h</div>
            <div class="item">i</div>
            <div class="item">j</div>
            <div class="item">k</div>
            <div class="item">l</div>
         </div>
     </div>
     <div class="flex-con">
         <div>stuff here</div>
     </div>
 </div>

Развернуть фрагмент

Я хочу разбить предметы на основе количества или чего-то в этом роде, чтобы у меня было всегда и только!2! столбцы элементов в классе flex-container- однако количество элементов меняется каждую неделю ( 1 в неделю)

Я мог бы менять n-го ребенка каждую неделю, но я хочу, я не хочу этого делать, если бы это было возможно

 .item:nth-child(5n) {
    page-break-after: always;
}

Я добавил изображение, чтобы показать, как я хочу, чтобы оно выглядело
я просто хочу, чтобы они были в двух столбцах внутри первого гибкого контейнера

 item a item b
item c item d
item e item f

заранее спасибо

1. Если у вас есть flex, используйте flex: css-tricks.com/snippets/css/a-guide-to-flexbox

2. я пытаюсь добиться этого с помощью flex, однако я не могу разбить элементы с помощью flex — они просто складываются в первую строку

3. «я хочу разбить их на две строки» — я вижу столбец, а не строку. слово, которое вы хотите, — это столбцы

4. где находится заголовок для каждого столбца в вашем HTML?

5. извините, не мой родной язык.. отредактировал вопрос

Ответ №1:

Просто используйте

 #wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

 body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.flex-container {
  flex-basis: 75%;
}

.flex-con {
  flex-basis: 25%;
}

#bottom {
  max-width: 100%;
  color: #fff;
  background-color: #205BA1;
  display: flex;
  padding: 1rem;
  margin-right: 0 !important;
  flex-wrap: wrap;
}

.item:nth-child(5n) {
  page-break-after: always;
}

 <div id="bottom">
  <div class="flex-container">
    <div id="wrapper">
      <div class="item">a</div>
      <div class="item">b</div>
      <div class="item">c</div>
      <div class="item">d</div>
      <div class="item">e</div>
      <div class="item">f</div>
      <div class="item">g</div>
      <div class="item">h</div>
      <div class="item">i</div>
      <div class="item">j</div>
      <div class="item">k</div>
      <div class="item">l</div>
    </div>
  </div>
  <div class="flex-con">
    <div>stuff here</div>
  </div>
</div>

Развернуть фрагмент

Ответ №2:

Посмотрите на мой codepen, это то, что вы ищете? https://codepen.io/agentbraun/pen/zYKQxGJ

 #wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 50px;
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
  -moz-column-fill: balance;
       column-fill: balance;
}

Развернуть фрагмент

Ответ №3:

Этот приведенный ниже код достигает цели, явно требуемой в вопросе, создавая рендеринг двух столбцов, которые ориентированы слева направо:

 A B
C D
E F
. .
. .

 .item{ float: left; width: 50px; }
.item:nth-child(2n   1){ clear:left }

 <div id="wrapper">
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
  <div class="item">d</div>
  <div class="item">e</div>
  <div class="item">f</div>
  <div class="item">g</div>
  <div class="item">h</div>
  <div class="item">i</div>
  <div class="item">j</div>
  <div class="item">k</div>
  <div class="item">l</div>
</div>

Развернуть фрагмент

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

2. Вероятно, вам нужно предоставить wrapper элементу overflow:hidden возможность работать с плавающими числами, как я предложил в моем примере. Я не стал предлагать grid, потому что я рассматриваю его как последнее средство из-за его высокой сложности, что делает его очень сложным для понимания большинством разработчиков

Метки: CSS разрывает дочерний элемент после n-го