按钮对齐

Question

I've been trying to create this webpage off a course from udemy. If you take a look at the picture you'll notice that at the bottom at the GET INVOLVED section, my buttons and texts are not aligned. I need advice on how to make these columns even so that the buttons are aligned. Should I use margin/padding or is there another way?

Answer 1

假设说明是在div编写的，请尝试为该div赋予min-height

Answer 2

An age old question indeed: how to make 2+ div s the same height?

There have been many hacks and workarounds, but nowadays flexbox comes to the rescue.

#wrapper { /* Something around those 3 columns */
    display: flex;
}

.pill { /* Every column has this class */
    flex: 1;
    align-items: center;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

Example on JSFiddle

Before using this example, I would recommend reading something about flexbox , maybe this exhaustive guide .

As stated below in the comments, there are some issues with cross-browser support at the moment. More details here