Выровняйте содержимое внутри двух соседних элементов - PullRequest
Новая
       7

Выровняйте содержимое внутри двух соседних элементов

1 голос
/ 12 марта 2019

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

<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

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

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

Ответы [ 4 ]

1 голос
/ 12 марта 2019

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

<!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 сглажена: вам просто нужен внешнийконтейнер сетки, а затем вы помещаете в него элементы сетки

0 голосов
/ 12 марта 2019

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

<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");

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

кодовая ссылка

0 голосов
/ 12 марта 2019 
<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 .

0 голосов
/ 12 марта 2019

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

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

...