使单独容器中的两个 div 始终对齐答案

【问题标题】：Making two divs in separate containers align always使单独容器中的两个 div 始终对齐
【发布时间】：2017-03-18 03:11:18
【问题描述】：

我有两个 DIV，它们位于换行的 flex 框中。所以我有两个按钮，我想始终对齐。

.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 class="main-container">


  <div class="container">
    <h2>
        Container 1
    </h2>
    <div class="inner-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
    <button>
      Click me
    </button>
  </div>
  <div class="container">
    <h2>
        Container 2
    </h2>
    <div class="inner-container">
      <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 class="more-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
  </div>
</div>

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

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

在桌面

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

【问题讨论】：

你可以在你的css中使用@media only screen and (max-width: 400px) { ... }
它应该是流畅的。我不知道这两个元素的高度
通过删除容器中的min-width: 300px;，它可以工作...
这对于 flexbox（或其他布局方法）是不可能的。没有对齐不共享共同父元素的元素的 CSS 方法。你需要 javascript/

标签： html css flexbox

【解决方案1】：

好吧，兄弟，我不明白你的目标，试试这个：

.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 {
  position: relative; /* position changed */
  width: 100%;
}
button.first { /* added style here */
  top: 5.65rem;
}

<div class="main-container">


  <div class="container">
    <h2>
        Container 1
    </h2>
    <div class="inner-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
    <button class="first"> <!-- added class here -->
      Click me
    </button>
  </div>
  <div class="container">
    <h2>
        Container 2
    </h2>
    <div class="inner-container">
      <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 class="more-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
  </div>
</div>

结果与您想要的结果相似。

这样可以吗？

【讨论】：

没有硬编码高度或位置无法修复。即使在这里，它也会在第二张图片中中断。 jsfiddle.net/vinodgubbala/d69jcpnz/2递减列拆分器，看看吧。

【解决方案2】：

试试那个兄弟

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

【讨论】：

我不认为这对我有用。也不确定我是否理解除了 nowrap 和 wrap 之外你在那里做了什么
我希望它能够像图像中显示的那样工作。按钮应并排对齐。它应该是流动的。