Question

在网页内容上，我尝试在顶部和底部对齐3个模块的内容。

使用flex，3个模块具有相同的高度。模块标题完全一致。但无法将按钮对齐：

KeyEqual_u = std::equal_to<U>, KeyEqual_v = std::equal_to<V>

#container {
		display: flex;
		align-items: stretch;
	}
	
	.module {
		margin-right: 2em;
		border: 1px solid white;
		flex-basis: 30%;
	}

为了实现这种底部对齐，我使用了一个简单的表格HTML代码as suggested here。

它在这里不起作用。我做错了什么？

Answer 1

我建议不要在这里使用table布局。由于您使用flex布局，因此您可以轻松地将buttons和input字段与底部对齐，方法是将模块设置为display:flex并使用{{1与justify-content。

<强>更新

为了更具体地阐述其工作原理，让我试着详细解释一下 space-between元素的flex-direction设置为.module。我在这里使用column，它结合了flex-flow和flex-direction。这将迫使flex-wrap元素从上到下排列。

flex-direction

<强>列

Flex容器的主轴与块轴相同。主开始点和主要端点与写入模式的前后点相同。

现在将.module-child设置为justify-content将确保灵活项目为（space-between元素）沿着线均匀分布。开始行的第一项和结束行的最后一项。

justify-content

<强>空间之间

Flex项目沿线均匀分布。完成间隔，例如两个相邻项之间的空间是相同的。主起始边和主端边分别用第一个和最后一个柔性项边缘刷新。

希望现在更有意义。

这里的例子。

抱歉，我只需删除这些内联样式。 ; - ）

.module-child

.main {
  text-align: center;
}

#container {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.module {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  flex-basis: 30%;
  margin: 0 1em;
  padding: 10px;
  border: 1px solid white;
}

.module:nth-child(1) {
  background-color: red;
}
.module:nth-child(2) {
  background-color: green;
}
.module:nth-child(3) {
  background-color: yellow;
}

.module-child {
  width: 100%;
}

Answer 2

添加此css

  .module table {min-height:100%; height:100%;}

演示链接 http://jsfiddle.net/qhpgk7nw/2/

Answer 3

你可以尝试这个：

<div style="text-align: center;">
    <h1>Title</h1>
      <h2>tagline</h2>
    <div id="container">
      <!-- Module1 -->
      <div class="module" style="background-color: red;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 1</strong></p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div id="mc_embed_signup">
                  <form>
                    <div>
                      <div><input name="EMAIL" type="email" value="" placeholder="email address" /></div>

                     </div>
                    <br/>
                      <div><input type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
      <!-- Fin module 1, début module 2 -->
      <div class="module" style="background-color: green;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 2</strong></p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div>
                  <form>
                    <div>
                      <div><input name="EMAIL" type="email" placeholder="email address" /></div>

                     </div>
                    <br/>
                      <div class="clear"><input name="subscribe" type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
<!-- Fin module 2, début module 3 -->
      <div class="module" style="background-color: yellow;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 3</strong></p>
                <p>lorem ipsum</p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div>
                  <form>
                    <div>
                      <div ><input name="EMAIL" type="email" placeholder="email address" /></div>

                     </div>
                    <br/>
                      <div class="clear"><input name="subscribe" type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
      <!-- Fin module 3 -->
    </div>
</div>

DEMO HERE

Answer 4

尝试这可以帮助你的风格

<style>
#container 
{
display: flex;
align-items: stretch;
justify-content: center;
}

.module 
{
margin-right: 2em;
border: 1px solid white;
flex-basis: 30%;
display: flex;
align-items: center;
justify-content: center;
}
.module tr:nth-child(2) 
{
height: 7em;
}
.module tr:nth-child(1)
{
align-self: flex-start;
}
.module tr:nth-child(3)
{
align-self: flex-end;
}
</style>

你的HTML中的

<div style="text-align: center;">
    <h1>Title</h1>
      <h2>tagline</h2>
    <div id="container">
      <!-- Module1 -->
      <div class="module" style="background-color: red;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 1</strong></p>

              </td>
            </tr>
            <tr>
            <td><p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
            </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div id="mc_embed_signup">
                  <form>
                    <div>
                      <div><input name="EMAIL" type="email" value="" placeholder="email address" /></div>

                     </div>

                      <div><input type="submit" value="button" /></div>

                  </form>
                   </div>
                </td>
             </tr>
               </tbody>
          </table>
      </div>
      <!-- Fin module 1, début module 2 -->
      <div class="module" style="background-color: green;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 2</strong></p>
              </td>
            </tr>
                    <tr>
            <td>
            </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div>
                  <form>
                    <div>
                      <div><input name="EMAIL" type="email" placeholder="email address" /></div>

                     </div>

                      <div class="clear"><input name="subscribe" type="submit" value="button" /></div>
                    </div>
                  </form>

              </td>
            </tr>

          </tbody>
        </table>
      </div>
<!-- Fin module 2, début module 3 -->
      <div class="module" style="background-color: yellow;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 3</strong></p>

              </td>
            </tr>
                    <tr>
            <td> <p>lorem ipsum</p>
            </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div>
                  <form>
                    <div>
                      <div ><input name="EMAIL" type="email" placeholder="email address" /></div>

                     </div>

                      <div class="clear"><input name="subscribe" type="submit" value="button" /></div>
                    </div>
                  </form>

              </td>
            </tr>

          </tbody>
        </table>
      </div>
      <!-- Fin module 3 -->
    </div>
</div>

内容的底部对齐不起作用，无法弄清楚原因

4 个答案: