对齐两个并排 div 中的内容

Question

我有两个并排的 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 单独实现此目的。

Answer 1

我不太确定你真正要求的是什么，但根据我对上述问题的解释，我认为在你的 div 中添加 min-height 是安全的，而不是 padding-bottom。这样您就可以继续向 div.

添加按钮

尽管要获得响应式结构，我还是建议您阅读有关 CSS 网格系统的内容。 More can be found here.

Answer 2

使用这个脚本

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

这仅适用于您 post 在代码笔

上的场景

codepen link

Answer 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;
}

link codepen。

Answer 4

这是使用网格布局的可能解决方案：

<!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 结构已展平：您只需要一个外部网格容器，然后将展平的网格项目放入其中

对齐两个并排 div 中的内容

Align content inside two side by side divs

css

less