Question

我有一个网站（http://defensemonkees.nl/），我们在索引页面上有3个面板。我制作了一个带有3个项目的柔性盒子，然后我使用拉伸使所有面板的高度相同。但我希望按钮贴在底部。我尝试过一种粘性页脚方法，但它一次只能在一个按钮上运行。在这种情况下，在左侧2个按钮上只有一个边距顶部更容易。但我认为必须有一个更清洁的解决方案来解决这个问题，而不仅仅是“硬代码”。我没有发布所有的CSS，因为大部分都是由Bootstrap处理的。

<div id="flexBox3Monkees">

        <div class="panel panel-default item">
                <div class="panel-heading">
                    <h3 class="panel-title">Voor wie?</h3>
                </div>
                <!-- end panel-heading -->
                <img src="Content/Images/WebMonkee.png" alt="DefenseMonkees Logo" class="img-circle monkeyPic" />
                <p class="indexP">
                    Krav Maga is geschikt voor iedereen! Geen enkele ervaring met zelfverdediging? 
                Jong, oud, man, vrouw, sportief en 'niet' sportief, bij DefenseMonkees begeleiden wij 
                u stap voor stap zodat u een conflict ontloopt of be&euml;indigd op de meest effici&euml;nte manier.
                We simuleren realistische situaties en zorgen er samen voor dat u een uitstekende
                conditie krijgt!
                </p>
                <div class="indexbutton">
                    <a href="../Fotos.aspx" class="btn btn-warning btn-block">Impressie</a>
                </div>
            </div>
            <div class="panel panel-default item">
                <div class="panel-heading">
                    <h3 class="panel-title">DefenseMonkees</h3>
                </div>
                <!-- end panel-heading -->
                <img src="Content/Images/WebMonkee.png" alt="Logo DefenseMonkees" class="img-circle monkeyPic" />
                <p class="indexP">
                    De instructeurs van DefenseMonkees zijn er trots op dat vrijwel al onze studenten
                in een vrij korte periode van inspanning een gezonder en fitter lichaam hebben gekregen,
                zich veiliger zijn gaan voelen en zelfverzekerder over straat durven. Dit motiveert
                DefenseMonkees om continu de beste resultaten te blijven na streven.
                </p>
                <div class="indexbutton buttonPositionCustom2I">
                    <a href="Succes.aspx" class="btn btn-info btn-block indexbutton">Succes verhalen</a>
                </div>
            </div>
        <!-- end panel -->

            <div id="indexPanel" class="panel panel-default item">
                <div class="panel-heading">
                    <h3 class="panel-title"><%= GetNextTraningDate() %> </h3>
                </div>
                <!-- end panel-heading -->
                <img src="Content/Images/WebMonkee.png" alt="Logo DefenseMonkees" class="img-circle monkeyPic" />
                <p class="indexP">Voor maar &#8364;36 per maand kunt u bij DefensMonkees 8 keer per maand trainen in Maastricht, Heerlen, Sittard of Utrecht.</p>

                <p class="indexP">
                    Wees gerust, beginnen is heel eenvoudig! Onze professionele instructeurs begeleiden u 
                stap voor stap dus wacht niet langer en neem vanavond nog een gratis proefles.
                </p>
                <div class="indexbutton buttonPositionCustom3I">
                    <a href="Proefles.aspx" id="buttonRed" class="btn btn-danger btn-block indexbutton">
                        <span class="glyphicon glyphicon-hand-up"></span>&nbsp;&nbsp;Boek gratis proefles</a>
                </div>
            </div>
        </div>

CSS

 #flexBox3Monkees {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    text-align: center;
}

.item {
    /*border: black 2px solid;*/
    width: 30%;
}

@media(max-width:767px) {
    #flexBox3Monkees {
        flex-direction: column;
        margin-top: 40px;
    }

    .item {
        width: 100%;

    }
}

Answer 1

试试这个？ DEMO

.item {
  display: flex;
  flex-direction: column;
}
.panel-heading {
  flex: 0 0 100%;
}

img {
  flex: 0 0 100%;
}

p {
  flex: 1;
}

.indexbutton {
   flex: 0 0 100%;
}

如何将多个按钮粘贴到具有不同内容的多个面板上

1 个答案: