Question

我一直试图将我的按钮对齐在同一高度，以便当文本将其中一个按下时它们都会下降。我的解决方案似乎不起作用。

查看我的代码：

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width = device-width, initial-scale = 1">
        <title>Placeholder</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="test.css">
        <style type="text/css"></style>
    </head>
    <body>
        <div class="container-groei">
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="container-groei-section">
                    <h2>Placement</h2>
                    <p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
                       <div class="med-linebreak"></div>
                    <div class="button-placement-groei">
                        <a href="#">
                        <div class="read-more-button">
                            <div class="read-more-button-text">Read more</div>
                        </div></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="container-groei-section">
                    <h2>Placement</h2>
                    <p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement texttextJust some placement text
                            Just some placement textJustlacement text</p> <br>
                       <div class="med-linebreak"></div>
                    <div class="button-placement-groei">
                        <a href="#">
                        <div class="read-more-button">
                            <div class="read-more-button-text">Read more</div>
                        </div></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="container-groei-section">
                    <h2>Placement</h2>
                    <p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
                       <div class="med-linebreak"></div>
                    <div class="button-placement-groei">
                        <a href="#">
                        <div class="read-more-button">
                            <div class="read-more-button-text">Read more</div>
                        </div></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="container-groei-section">
                    <h2>Placement</h2>
                    <p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
                       <div class="med-linebreak"></div>
                    <div class="button-placement-groei">
                        <a href="#">
                        <div class="read-more-button">
                            <div class="read-more-button-text">Read more</div>
                        </div></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="container-groei-section">
                    <h2>Placement</h2>
                    <p>Just some placement textJust some placement textJust some placement textJust some placement</p> <br>
                       <div class="med-linebreak"></div>
                    <div class="button-placement-groei">
                        <a href="#">
                        <div class="read-more-button">
                            <div class="read-more-button-text">Read more</div>
                        </div></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="container-groei-section">
                    <h2>Placement</h2>
                    <p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
                       <div class="med-linebreak"></div>
                    <div class="button-placement-groei">
                        <a href="#">
                        <div class="read-more-button">
                            <div class="read-more-button-text">Read more</div>
                        </div></a>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

CSS

.container-groei {
    max-width: 1600px; 
    display: block;
    overflow: auto;
    margin: 0 auto;
    padding-top: 150px;
    border-top: 1px solid rgba(0,0,0,0.10);
    border-left: 1px solid rgba(0,0,0,0.10);
    border-right: 1px solid rgba(0,0,0,0.10);
}   

.container-groei-section {
    min-height: 550px;
    margin: 0 auto;
}

.container-groei-section p {
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto;
}

.container-groei-section h2 {
    color: #0E8DBD;
    padding-bottom: 20px;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
}

.button-placement-groei {
    max-width: 500px;
    margin: 0 auto;
}

.read-more-button {
    background: #00aeef;
    border-radius: 11px;
}

.read-more-button-text {
    font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif;
    color: #FFF;
    font-size: 21px;
    text-align: center;
    padding: 5px 10px;
}

我可能搞砸了我的CSS，但似乎无法弄清楚是什么。我正在寻找的是按钮在任何时候都保持相同的高度，因此按钮和段落之间的空白区域包含的字数少于其他按钮。一个简单的解决方案是给段落一个最大高度，但这只会产生更多问题。

感谢您的时间。

Answer 1

正如我在评论中提到的，如果要实现的是内容在同一级别的对齐，则应该使用CSS Grid而不是bootstrap的固定列网格系统。但是这里有一个修复你的代码，所有你需要做的就是从容器 - groei部分取出按钮并调整部分的高度。

但是如果你想让你的按钮组在这个部分内，你需要使用按钮的绝对定位，这是实现这一目标的唯一方法。但是我仍然建议你检查CSS网格。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width = device-width, initial-scale = 1">
        <title>Placeholder</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="test.css">
        <style type="text/css">
          .container-groei {
    max-width: 1600px; 
    display: block;
    overflow: auto;
    margin: 0 auto;
    padding-top: 150px;
    border-top: 1px solid rgba(0,0,0,0.10);
    border-left: 1px solid rgba(0,0,0,0.10);
    border-right: 1px solid rgba(0,0,0,0.10);
}   

.container-groei-section {
    min-height: 400px;
    margin: 0 auto;
}

.container-groei-section p {
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto;
}

.container-groei-section h2 {
    color: #0E8DBD;
    padding-bottom: px;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
}

.button-placement-groei {
    max-width: 500px;
    margin: 0 auto;
}

.read-more-button {
    background: #00aeef;
    border-radius: 11px;
}

.read-more-button-text {
    font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif;
    color: #FFF;
    font-size: 21px;
    text-align: center;
    padding: 5px 10px;
}
        </style>
    </head>
    <body>
        <div class="container-groei">
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="container-groei-section">
                    <h2>Placement</h2>
                    <p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
                       <div class="med-linebreak"></div>

                </div>
                <div class="button-placement-groei">
                        <a href="#">
                        <div class="read-more-button">
                            <div class="read-more-button-text">Read more</div>
                        </div></a>
                    </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="container-groei-section">
                    <h2>Placement</h2>
                    <p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement texttextJust some placement text
                            Just some placement textJustlacement text</p> <br>
                       <div class="med-linebreak"></div>

                </div>
                <div class="button-placement-groei">
                        <a href="#">
                        <div class="read-more-button">
                            <div class="read-more-button-text">Read more</div>
                        </div></a>
                    </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="container-groei-section">
                    <h2>Placement</h2>
                    <p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
                       <div class="med-linebreak"></div>
                </div>
                <div class="button-placement-groei">
                        <a href="#">
                        <div class="read-more-button">
                            <div class="read-more-button-text">Read more</div>
                        </div></a>
                    </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="container-groei-section">
                    <h2>Placement</h2>
                    <p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
                       <div class="med-linebreak"></div>
                </div>
                <div class="button-placement-groei">
                        <a href="#">
                        <div class="read-more-button">
                            <div class="read-more-button-text">Read more</div>
                        </div></a>
                    </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="container-groei-section">
                    <h2>Placement</h2>
                    <p>Just some placement textJust some placement textJust some placement textJust some placement</p> <br>
                       <div class="med-linebreak"></div>
                </div>
                <div class="button-placement-groei">
                        <a href="#">
                        <div class="read-more-button">
                            <div class="read-more-button-text">Read more</div>
                        </div></a>
                    </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="container-groei-section">
                    <h2>Placement</h2>
                    <p>Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some Just some placement textJust some placement textJust some placement textJust some placement textJust some placement textJust some placement text
                            Just some placement textJust some placement textJust some placement textJust some placement text</p> <br>
                       <div class="med-linebreak"></div>
                </div>
                <div class="button-placement-groei">
                        <a href="#">
                        <div class="read-more-button">
                            <div class="read-more-button-text">Read more</div>
                        </div></a>
                    </div>
            </div>
        </div>
    </body>
    </html>

如何在同一高度对齐我的按钮？

1 个答案: