CSS - 在同一行对齐按钮

Question

我想将这些按钮对齐在同一行。 看起来它正在根据文本对齐，但我希望按钮根据卡片的底部对齐，因此它与文本的长度无关。 感谢您的任何帮助。 我也包含了代码片段。

我的结果

期望的结果

 .container3 { padding-top: 50px; display: flex; justify-content: center; }.box { background-color: white; opacity: 0.9; width: 300px; height:500px; margin:20px; box-sizing: border-box; border-radius: 10px; transition: transform 0.5s; box-shadow: 2px 2px 20px grey; cursor: pointer; }.box-image.img1 { height:200px; background-image: url(images/pamatky.jpg); background-size:cover; box-sizing: border-box; border-radius: 10px; margin: 10px; }.box-image.img2 { height:200px; background-image: url(images/pyramidy.jpg); background-size:cover; box-sizing: border-box; border-radius: 10px; margin: 10px; }.box-image.img3 { height:200px; background-image: url(images/chufe.jpg); background-size:cover; box-sizing: border-box; border-radius: 10px; margin: 10px; }.box-image.img4 { height:200px; background-image: url(images/rache.jpg); background-size:cover; box-sizing: border-box; border-radius: 10px; margin: 10px; }.box:hover { transform: scale(1.1); } p.box-text { color: black; padding: 10px; text-align: justify; font-weight: 500; } h2 { text-align: center; font-weight: 900; }.button a { background-color: white; color: black; font-size: 15px; padding: 15px 20px; display: block; text-align:center; margin: 0px 100px; text-decoration: none; cursor: pointer; box-sizing: border-box; border-radius: 10px; box-shadow: 2px 2px 5px grey; bottom: 2px; }

 <div id="container2"> <section class="container3"> <div class="box"> <div class="box-image img1"></div> <h2>Památky</h2> <p class="box-text">Egypt je země na památky velice bohatá. Pojedeme-li po Nilu od egyptských hranic na sever, můžeme se neustále nechávat okouzlovat novými a novými chrámy, sfingami, pyramidami …. Naše stránky se teprve rozjíždějí. Proto jsme zatím vybrali pouze nejnavštěvovanější památky. Samozřejmě budeme jejich počet průběžně rozšiřovat. Zatím jsou rozděleny do tří oblastí - okolí Káhiry (Gíza, Sakkara a Memfis), okolí Luxoru (starověké Théby neboli Veset) a jižní hranice Egypta (Asuán, Abú Simbel …). S rozšiřováním stránek budeme samozřejmě rozšiřovat i počet oblastí.</p> <div class="button"><a href="">VÍCE</a></div> </div> <div class="box"> <div class="box-image img2"></div> <h2>Pyramidy</h2> <p class="box-text">Tři velké jehlany se sfingou v popředí jsou snad nejčastěji používaným symbolem Egypta.Udivující je, že vznikly již v raném počátku egyptské civilizace a státnost, za vlády 4. dynastie. Tyto tři velké pyramidy v Gíze jsou sice nejznámější, avšak v žádném případě jediné. Po celém Egyptě je rozeseto množství méně známých, ale ne méně cenných pyramid. Že tyto monumentální stavby byly postaveny proto, aby chránily věčný spánek faraónů, ví dnes každé malé dítě. Již pět tisíciletí zaměstnávají mysl architektů, matematiků, archeologů, stavitelů, ale i vyznavačů méně exaktních směrů.</p> <div class="button"><a href="">VÍCE</a></div> </div> <div class="box"> <div class="box-image img3"></div> <h2>Chufevova pyramida</h2> <p class="box-text">Je známá pod jménem vládce, který ji nechal postavit, faraóna Chufeva, řecky Cheopse. Je to největší dodnes stojící pyramida a na dlouhá tisíciletí největší dílo lidských rukou vůbec. Do roku 1880 byla nejvyšší stavbou na světě, pak ji překonaly věže dómu v Kolíně nad Rýnem av roce 1889 Eiffelova věž. Se čtvercovou základnou o straně 230 metrů a původní výškou 146 m si naše představivost asi těžko poradí. Fotbalovým fanouškům přiblížíme lépe její velikost, když řekneme, že na její základnu by se vešlo deset fotbalových hřišť.</p> <div class="button"><a href="">VÍCE</a></div> </div> <div class="box"> <div class="box-image img4"></div> <h2>Rachefova pyramida</h2> <p class="box-text">Známe ji též pod názvem Chefrenova pyramida. Po vzoru svého otce Chufeva si nechává stavět svoji hrobku i faraón Rachef. Tato pyramida, která je o deset metrů nižší, než byla původní výška Chufevovy pyramidy ao metr nižší než je dnes, působí daleko vyšším dojmem, protože je postavená na místě výše postaveném. Obě jsou však téměř stejně veliké. Rozdíl deseti metrů výšky a dvaceti metrů v jedné straně základny (Rachefova má základnu 210 x 210 m) už na výsledném monumentálním dojmu nic nebere.</p> <div class="button"><a href="">VÍCE</a></div> </div> </div> </div> </div>

Answer 1

你可以试试这个：

 .box { position: relative; }.button { position: absolute; bottom: 10px; left: 0; right: 0; margin-left: auto; margin-right: auto; }

Answer 2

这个想法是使所有.box元素成为具有column方向的 flexbox 容器，并且最后一个子元素（ .button容器）应该具有margin-top: auto 。

您还可以通过使用object-fit属性将图像作为常规图像元素（而不是背景，因为它们传达信息）来提高内容的可访问性和可维护性（如您所见，我使用了 4 个不同的图像，但它们涵盖了保持纵横比的空间。）

 .container3 { padding-top: 50px; display: flex; gap: 20px; justify-content: center; }.container3 * { box-sizing: border-box; }.box { background-color: white; opacity: 0.9; width: 300px; border-radius: 10px; transition: transform 0.5s; box-shadow: 2px 2px 20px grey; cursor: pointer; display: flex; flex-direction: column; }.box figure { display: block; height: 200px; margin: 10px; padding: 0; border-radius: inherit; overflow: hidden; }.box img { height: 100%; width: 100%; object-fit: cover; object-position: center center; }.box:hover { transform: scale(1.1); } p.box-text { color: black; padding: 10px; text-align: justify; font-weight: 500; } h2 { text-align: center; font-weight: 900; }.button { margin-top: auto; margin-bottom: 30px; }.button a { background-color: white; color: black; font-size: 15px; padding: 15px 20px; display: block; text-align:center; margin: 0px 100px; text-decoration: none; cursor: pointer; box-sizing: border-box; border-radius: 10px; box-shadow: 2px 2px 5px grey; bottom: 2px; }

 <section class="container3"> <div class="box"> <figure><img src="http://via.placeholder.com/1000x200" /></figure> <h2>Památky</h2> <p class="box-text">Egypt je země na památky velice bohatá. Pojedeme-li po Nilu od egyptských hranic na sever, můžeme se neustále nechávat okouzlovat novými a novými chrámy, sfingami, pyramidami …. Naše stránky se teprve rozjíždějí. Proto jsme zatím vybrali pouze nejnavštěvovanější památky. Samozřejmě budeme jejich počet průběžně rozšiřovat. Zatím jsou rozděleny do tří oblastí - okolí Káhiry (Gíza, Sakkara a Memfis), okolí Luxoru (starověké Théby neboli Veset) a jižní hranice Egypta (Asuán, Abú Simbel …). S rozšiřováním stránek budeme samozřejmě rozšiřovat i počet oblastí.</p> <div class="button"><a href="">VÍCE</a></div> </div> <div class="box"> <figure><img src="http://via.placeholder.com/500x400" /></figure> <h2>Pyramidy</h2> <p class="box-text">Tři velké jehlany se sfingou v popředí jsou snad nejčastěji používaným symbolem Egypta.Udivující je, že vznikly již v raném počátku egyptské civilizace a státnost, za vlády 4. dynastie. Tyto tři velké pyramidy v Gíze jsou sice nejznámější, avšak v žádném případě jediné. Po celém Egyptě je rozeseto množství méně známých, ale ne méně cenných pyramid. Že tyto monumentální stavby byly postaveny proto, aby chránily věčný spánek faraónů, ví dnes každé malé dítě. Již pět tisíciletí zaměstnávají mysl architektů, matematiků, archeologů, stavitelů, ale i vyznavačů méně exaktních směrů.</p> <div class="button"><a href="">VÍCE</a></div> </div> <div class="box"> <figure><img src="http://via.placeholder.com/400x300" /></figure> <h2>Chufevova pyramida</h2> <p class="box-text">Je známá pod jménem vládce, který ji nechal postavit, faraóna Chufeva, řecky Cheopse. Je to největší dodnes stojící pyramida a na dlouhá tisíciletí největší dílo lidských rukou vůbec. Do roku 1880 byla nejvyšší stavbou na světě, pak ji překonaly věže dómu v Kolíně nad Rýnem av roce 1889 Eiffelova věž. Se čtvercovou základnou o straně 230 metrů a původní výškou 146 m si naše představivost asi těžko poradí. Fotbalovým fanouškům přiblížíme lépe její velikost, když řekneme, že na její základnu by se vešlo deset fotbalových hřišť.</p> <div class="button"><a href="">VÍCE</a></div> </div> <div class="box"> <figure><img src="http://via.placeholder.com/500x300" /></figure> <h2>Rachefova pyramida</h2> <p class="box-text">Známe ji též pod názvem Chefrenova pyramida. Po vzoru svého otce Chufeva si nechává stavět svoji hrobku i faraón Rachef. Tato pyramida, která je o deset metrů nižší, než byla původní výška Chufevovy pyramidy ao metr nižší než je dnes, působí daleko vyšším dojmem, protože je postavená na místě výše postaveném. Obě jsou však téměř stejně veliké. Rozdíl deseti metrů výšky a dvaceti metrů v jedné straně základny (Rachefova má základnu 210 x 210 m) už na výsledném monumentálním dojmu nic nebere.</p> <div class="button"><a href="">VÍCE</a></div> </div> </section>

Answer 3

他们以这种方式做出反应，因为它们取决于文本的长度。 您可以使用.box position: absolute将按钮放在 .box 中。 将它们放在.container中，将width: 100%赋予.container ，然后text-align: center （因此按钮将保持居中）和position: absolute的坐标。 给left: 0 （所以.container保持居中）和你想要的与底部的距离。 显然给position: relative对于你的.box ，一切都应该正常工作。