html – 在单独的容器中创建两个div始终对齐

概述我有两个DIV,它们是在行包装的柔性盒子里. 所以我有两个按钮,我想要始终对齐. .main-container { display: flex; flex-flow: row wrap; justify-content: center;}.container { flex: 1; flex-flow: column wrap; justify-content: 我有两个div,它们是在行包装的柔性盒子里.
所以我有两个按钮,我想要始终对齐.

.main-container {  display: flex;  flex-flow: row wrap;  justify-content: center;}.container {  flex: 1;    flex-flow: column wrap;  justify-content: center;  border: 1px solID gray;  border-radius: 5px;  margin: 5px;  padding: 5px;  min-wIDth: 300px;}.container> * {  flex: 1;}button {  wIDth: 100%;}

<div >  <div >    <h2>        Container 1    </h2>    <div >      <div>test</div>      <div>test</div>      <div>test</div>      <div>test</div>      <div>test</div>    </div>    <button>      Click me    </button>  </div>  <div >    <h2>        Container 2    </h2>    <div >      <div>test</div>      <div>test</div>      <div>test</div>      <div>test</div>      <div>test</div>      <div>test and this is a long text to wrap around. So let it be</div>      <div>test</div>      <div>test</div>      <div>test</div>      <div>test</div>    </div>    <button>      Click me    </button>    <div >      <div>test</div>      <div>test</div>      <div>test</div>      <div>test</div>      <div>test</div>    </div>  </div></div>

在移动分辨率中它应该看起来像

在较小的分辨率,它应该看起来像

在桌面上

Jsfiddle：https://jsfiddle.net/d69jcpnz/

解决方法 试试那个兄弟

.main-container {  display: flex;  flex-flow: row nowrap; /*modification here*/  justify-content: center;}.container {  flex: 1;    flex-flow: column wrap;  justify-content: center;  border: 1px solID gray;  border-radius: 5px;  margin: 5px;  padding: 5px;  min-wIDth: 300px;}.container> * {  flex: 1;}button {  wIDth: 100%;}/*add here*/@media screen and (max-wIDth: 660px) {  .main-container {    flex-flow: row wrap;  }}

总结

以上是内存溢出为你收集整理的html – 在单独的容器中创建两个div始终对齐全部内容，希望文章能够帮你解决html – 在单独的容器中创建两个div始终对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。