html - 如何将我的按钮对齐在相同的高度？-6ren

html - 如何将我的按钮对齐在相同的高度？

转载作者：行者123 更新时间：2023-11-28 02:35:31

我一直在尝试将我的按钮对齐到相同的高度，这样当文本按下其中一个时，它们就会全部落下。我的首选解决方案似乎不起作用。

看看我的代码:

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 可能搞砸了，但似乎无法弄清楚是什么。我正在寻找的是按钮在任何时候都保持在相同的高度，这样按钮和包含比其他单词少的段落之间的空白。一个简单的解决方案是为段落设置最大高度，但这只会产生更多问题。

感谢您的宝贵时间。

最佳答案

正如我在评论中提到的，如果您想要实现的是同一级别的内容对齐，您应该使用 CSS Grid 而不是 bootstrap 的固定列网格系统。但是这里有一个针对您的代码的修复程序，您所要做的就是将按钮从 container-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>

关于html - 如何将我的按钮对齐在相同的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47444661/

文章推荐： html - 使用 Bootstrap 的 nav-tabs 导致子 div 溢出

文章推荐： html - 当存在 Overflow-Y 时，禁用的 TextArea Resize 停止工作

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何将我的按钮对齐在相同的高度？