html - 如何使所有按钮与div的距离相等

Question

这是我目前拥有的-

.box{
	background-color: #e61a39;
	width: 25%;
	float:left;
	margin: 0px;
	text-align: center;
	min-height: 380px;
}

#container{
	width: 90%;
	margin: auto;
}

<section id="container">
	<div class="box">
		<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-1.png">
		<h1>Our Menu</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolor</p>
		<button>Discover Pizza</button>
	</div>
	<div class="box">
		<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-3.png">
		<h1>Your Nearest Store</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
		<button>Find Pizza Restaurants</button>
	</div>
	<div class="box">
		<img src="https://www.dominos.co.in/theme2/front/images/home/vector-smart-object.png">
		<h1>Birthday Party</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
		<button>Book Now</button>
	</div>
	<div class="box">
		<img src="https://www.dominos.co.in/theme2/front/images/home/vector-smart-objectcopy-6.png">
		<h1>Catering</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
		<button>Book Now</button>
	</div>
</section>

此代码使我的按钮不均匀。我该怎么做才能使所有按钮与 box 底部的距离相同？

Answer 1

使用位置 css 属性。

.box{
	background-color: #e61a39;
	width: 25%;
	float:left;
	margin: 0px;
	text-align: center;
	min-height: 380px;
    position:relative;
}
button{
        position:absolute;
        bottom: 10px;
        left:25%;
        right:25%;

}
#container{
	width: 90%;
	margin: auto;
}

<section id="container">
	<div class="box">
		<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-1.png">
		<h1>Our Menu</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolor</p>
		<button>Discover Pizza</button>
	</div>
	<div class="box">
		<img src="https://www.dominos.co.in/theme2/front/images/home/layer-7-3.png">
		<h1>Your Nearest Store</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
		<button>Find Pizza Restaurants</button>
	</div>
	<div class="box">
		<img src="https://www.dominos.co.in/theme2/front/images/home/vector-smart-object.png">
		<h1>Birthday Party</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
		<button>Book Now</button>
	</div>
	<div class="box">
		<img src="https://www.dominos.co.in/theme2/front/images/home/vector-smart-objectcopy-6.png">
		<h1>Catering</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor</p>
		<button>Book Now</button>
	</div>
</section>