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>

Answer 2

这是一种方法

.box{
	background-color: #e61a39;
	text-align: center;
	min-height: 380px;
  display: flex;
  flex-direction: column;
}

.box .content {
  flex-grow: 1;
}

.box .button-wrapper {
  height: 40px;
}

#container{
	width: 90%;
  display: flex;
  justify-content: center;
}

<section id="container">
	<div class="box">
    <div class="content">
      <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>
    </div>
    <div class="button-wrapper">
      <button>Discover Pizza</button>
    </div>
	</div>
	<div class="box">
    <div class="content">
      <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>
    </div>
    <div class="button-wrapper">
      <button>Discover Pizza</button>
    </div>
	</div>
  <div class="box">
    <div class="content">
      <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>
    </div>
    <div class="button-wrapper">
      <button>Discover Pizza</button>
    </div>
	</div>
  <div class="box">
    <div class="content">
      <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>
    </div>
    <div class="button-wrapper">
      <button>Discover Pizza</button>
    </div>
	</div>
</section>

我在这里使用的是flexbox（不支持ie10和down）。

这是一种灵活的方法，因为它不是绝对的，也不依赖于上面div的高度。
我们定义了按钮包装器的高度，并对'content'div表示包含所有其余的'box'。

如何让所有按钮与div保持相同的距离

2 个答案: