Выровнять содержимое внутри двух параллельных разделов

ProgramBox

Выровнять содержимое внутри двух параллельных разделов

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

#css #less

#css #Меньше

Вопрос:

У меня есть два раздела, которые расположены рядом, и мне нужно выровнять кнопки внизу по верхнему краю

 <div class="outer">
  <div class="container">
    <div><span>Heading</span></div>
    <div><button>Input</button><button>Input</button></div>
  </div>
  <div class="container">
    <div><span>Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2</span></div>
    <div><button>Input 2</button><button>Input 2</button><button>Input 2</button><button>Input 2</button><button>Input 2</button></div>
  </div>
</div>

.outer {
  display: flex;
}

.container {
  width: 200px;
  border: 1px solid red;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container div {
  border: 1px solid;
}

button {
  width: 80px;
}

Это структура html https://codepen.io/anon/pen/vPmeKd

Это выравнивание, которого я хочу достичь https://codepen.io/anon/pen/pYWKRZ

Я использовал заполнение снизу во втором code pen, но это нежизнеспособное решение, потому что количество строк для заголовка и кнопок может варьироваться, и мне пришлось бы использовать jquery.

Вопрос в том, могу ли я достичь этого только с помощью CSS. Изменение структуры HTML или использование jquery в данный момент было бы кошмаром, я хочу убедиться, что на данном этапе я не смогу достичь этого с помощью одного CSS.

1.получить высоту другого раздела и установить ее как var height = document.getElementById('seconddiv').clientHeight; document.getElementById('firstdiv').setAttribute("style",height);

2. @Liviu Boboia на данный момент ваша стратегия верстки основана на flexbox. По сути, у вас есть два столбца (по одному для каждого div.контейнера), но проблема, которую вы хотите решить, подразумевает выравнивание элементов, которые находятся в разных столбцах. Вероятно, лучшим инструментом для достижения этой цели является использование макета сетки .

3. @Liviu Boboia flexblx лучше всего подходит для одномерных задач (таких как выравнивание и размещение элементов внутри одной строки или одного столбца). Если у вас возникла двумерная проблема (вы хотите выровнять элементы в разных столбцах или строках), то можно использовать макет сетки

Ответ №1:

Это возможное решение с использованием сетки:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sample grid layout</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <div class="container">
        <div><span>Heading</span></div>
        <div><span>Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2</span></div>
        <div><button>Input</button><button>Input</button></div>
        <div><button>Input 2</button><button>Input 2</button><button>Input 2</button><button>Input 2</button><button>Input 2</button></div></div>
    </div>
</body>
</html>

вот CSS:

 .container {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 200px));
    grid-template-rows: repeat(2, auto);
    grid-gap: 0.5em;
}

Обратите внимание, что здесь структура HTML была сглажена: вам просто нужен внешний контейнер grid, а затем вы помещаете в него элементы flatten grid

Ответ №2:

Я совершенно не уверен в том, о чем вы на самом деле просите, но, исходя из моей интерпретации приведенного выше вопроса, я думаю, что было бы безопасно добавить min-height в ваш div вместо padding-bottom . Таким образом, вы можете продолжать добавлять кнопки в div.

Хотя для достижения адаптивной структуры я бы посоветовал вам прочитать о сеточной системе CSS. Больше можно найти здесь.

Ответ №3:

 <div class="outer">
  <div class="container">
    <div><span>Heading</span></div> 
      <div><button>Input</button><button>Input</button></div>        
  </div>
  <div class="container">
    <div><span>Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2 ff s sfsd fsd</span></div>
    <div><button>Input 2</button><button>Input 2</button><button>Input 2</button><button>Input 2</button><button>Input 2</button></div>
  </div>
</div>

Возможно, это могло бы помочь вам:

 .outer {
  display: flex;
  max-width: 400px;
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

.container > div:nth-of-type(1) { 
  margin-bottom: auto;
}

.container > div:nth-of-type(2) {
  border: 1px solid green;
  min-height: 100px;
}

ссылка на codepen.

Ответ №4:

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

 <div class="outer">
  <div class="container">
    <div><span>Heading</span></div>
// add id leftside
    <div id="leftside"><button>Input</button><button>Input</button></div>
  </div>
  <div class="container">
    <div><span>Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2Heading 2</span></div>
// add id rightside
    <div id="rightside"><button>Input 2</button><button>Input 2</button><button>Input 2</button><button>Input 2</button><button>Input 2</button></div>
  </div>
</div>

.outer {
  display: flex;
}

.container {
  width: 200px;
  border: 1px solid red;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container div {
  border: 1px solid;
}

button {
  width: 80px;
}

 var height = document.getElementById('rightside').clientHeight;

document.getElementById('leftside').setAttribute("style","height:" height "px");

это только для того сценария, который вы публикуете в code pen

ссылка на codepen