Question

I've attached an illustration to help me get my point across!

因此，DIV 1和DIV 2（PARENT DIV的子项）是我构建的网页上的列，其中的内容高度不同，所以目前他们的按钮不要垂直排队。

我需要垂直对齐BUTTON 1和BUTTON 2（我猜到PARENT DIV的底部？）;

我该如何解决这个问题？

谢谢！

Answer 1

您可以在DIV 1和DIV 2中应用位置相对和底部填充，以防止其内容与按钮重叠，按钮的位置应该是绝对的（根据您的屏幕截图，可能是底部：10px）。

示例：jsfiddle.net/yy87qdmt/1 /

Answer 2

我不认为你可以摆脱CSS指令的位置，但是如果你不想使用bottom，那么有许多jQuery示例可以让你逻辑地放置你的div。

或者（我知道你似乎想要使用Div），但你可以更容易地使用表格。

Answer 3

经测试＆amp;在firefox-45和chrome-50中证明

<body>
    <main>
        <style scoped>
            main
            {
                flex-direction: row;
                display: flex;
            }
            main > figure
            {
                border: 1px darkgrey solid;
                justify-content: flex-end;
                flex-direction: column;
                box-sizing: border-box;
                display: flex;
            }
            main > figure > :first-child
            {
                background-color: lightgrey;
                flex-grow: 1;
            }
            main > figure > figcaption
            {
                background-color: black;
                color: lightgrey;
                flex-shrink: 1;
            }
        </style>
        <figure>
            <picture>
                <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
                <img src="mdn-logo-narrow.png" alt="MDN">
            </picture>
            <figcaption>
                Caption 0
            </figcaption>
        </figure>
        <figure>
            <article>
                <p>Lorem ipsum dolor sit amet cosectetur...</p>
                <p>...Lorem ipsum dolor sit amet cosectetur...</p>
                <p>...Lorem ipsum dolor sit amet cosectetur</p>
            </article>
            <figcaption>
                Caption 1
            </figcaption>
        </figure>
    </main>
</body>

Answer 4

Flexbox可以做到这一点。

.row {
  display: flex;
  width: 80%;
  margin: auto;
}
.col {
  width: 50%;
  border: 1px solid grey;
  text-align: center;
  padding: 1em;
}
img {
  width: auto;
  max-height: 100%;
}
p {
  text-align: justify;
}
/* the magic */

.col {
  display: flex;
  flex-direction: column;
}
button {
  margin-top: auto;
}

<div class="row">
  <div class="col">
    <h2>My Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, dignissimos.</p>
    <button>My button</button>
  </div>
  <div class="col">
    <h2>My Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae excepturi autem laborum veritatis ipsam odio itaque, dolorem modi ipsum voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque assumenda error blanditiis aliquam
      repellendus, necessitatibus doloribus ipsa eveniet natus laborum.</p>
    <button>My button</button>
  </div>
</div>

垂直对齐不同高度列中的元素

4 个答案: