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

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

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

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

这仅适用于您在密码笔上发布的情况

codepen link

在两个并排的div中对齐内容

2 个答案: