Question

我需要在容器的底部强制使用两个按钮，左边一个，右边一个。

但需要注意的是： -

容器中内容的长度可能不同。
无法修复容器的宽度。

这需要响应性地工作，所以在任何设备宽度，两个按钮需要保持左下角和右下角，与所有其他元素效果成比例。

＆＃13;

.left {float: left;}
.right {float: right;}

.service-blocks {margin: 20px 0;}

.service-blocks ul {margin: 0 auto;}

.service-blocks li {
  list-style: none;
  width: 29.4%;
  display: inline-block;
  border: 2px solid #222;
  padding: 10px;
  margin: 0 1%;
  min-height: 350px;
  vertical-align: top;
  position: relative;
}

.service-blocks li:first-of-type {margin-left: 0;}
.service-blocks li:nth-of-type(3) {margin-right: 0;}

.service-blocks li .button-container {
  display: block;
  position: absolute;
  bottom: 10px;
}

.service-blocks li a.button {
  display: inline-block;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: .25rem;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.service-blocks li a.button.enquire {
    color: #fff;
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.service-blocks li a.button.learn {
    color: #fff;
    background-color: #384C6A;
    border-color: #384C6A;
}

＆＃13;

<div class="service-blocks">
  <ul>
    <li>
      <h2>Service 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, ligula quis convallis accumsan, ipsum ex lobortis risus, a malesuada orci turpis vel leo. Fusce sit amet arcu est. Ut mi nunc, vestibulum eu urna sed, blandit euismod est. Aliquam ut gravida orci. Sed varius iaculis diam, efficitur rutrum massa blandit sed. Nam in odio ornare, fringilla ex in, dapibus tortor. Aliquam aliquet ac dui sit amet fermentum.</p>
      <span class="button-container">
        <a href="/contact-us/" class="button left enquire" target="_blank">Enquire</a>
        <a href="/service-1/" class="button right learn">Learn More</a>
      </span>
    </li>
    <li>
      <h2>Service 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, ligula quis convallis accumsan, ipsum ex lobortis risus, a malesuada orci turpis vel leo. Fusce sit amet arcu est. Ut mi nunc, vestibulum eu urna sed, blandit euismod est. Aliquam ut gravida orci. Sed varius iaculis diam, efficitur rutrum massa blandit sed. Nam in odio ornare, fringilla ex in, dapibus tortor. Aliquam aliquet ac dui sit amet fermentum.</p>
      <span class="button-container">
        <a href="/contact-us/" class="button left enquire" target="_blank">Enquire</a>
        <a href="/service-2/" class="button right learn">Learn More</a>
      </span>
    </li>
    <li>
      <h2>Service 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, ligula quis convallis accumsan, ipsum ex lobortis risus, a malesuada orci turpis vel leo. Fusce sit amet arcu est. Ut mi nunc, vestibulum eu urna sed, blandit euismod est. Aliquam ut gravida orci. Sed varius iaculis diam, efficitur rutrum massa blandit sed. Nam in odio ornare, fringilla ex in, dapibus tortor. Aliquam aliquet ac dui sit amet fermentum.</p>
      <span class="button-container">
        <a href="/contact-us/" class="button left enquire" target="_blank">Enquire</a>
        <a href="/service-3/" class="button right learn">Learn More</a>
      </span>
    </li>    
  </ul>
</div>

＆＃13;

我也在jsfiddle创建了一个基本演示。

我摆弄了各种各样的亲戚 - ＆gt;绝对定位，如果我将宽度应用于.button-container，那么我可以使按钮左右浮动，但这似乎相当笨重，不同的px宽度在不同的媒体查询或尝试一个尺寸适合所有宽度为％。

我希望只在可能的情况下保留此CSS，但如果绝对必要，我会考虑使用jQuery。

Answer 1

使用flex方法并根据容器调整按钮大小。

的CSS：

.service-blocks li .button-container {
    display: flex;
    position: absolute;
    bottom: 10px;
    left: 0;
    justify-content: space-between;
}

Answer 2

将按钮容器设置为绝对宽度后，将设置为auto以使容器可用，使用左右位置属性。然后将按钮位置分别设置为左，右，下0px。

请检查以下fiddle

.left {float: left;}
.right {float: right;}

.service-blocks {margin: 20px 0;}
.service-blocks p {width:225px}

.service-blocks ul {margin: 0 auto;}

.service-blocks li {
  list-style: none;
  width: 43.05%;
  display: inline-block;
  border: 2px solid #222;
  padding: 10px;
  margin: 0 1%;
  min-height: 350px;
  vertical-align: top;
  position: relative;
}

.service-blocks li:first-of-type {margin-left: 0;}
.service-blocks li:nth-of-type(3) {margin-right: 0;}

.service-blocks li .button-container {
  display: block;
  position: absolute;
  bottom: 10px;
  left:0px;
  width:100%;
}

.service-blocks li a.button {
  display: inline-block;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: .25rem;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.service-blocks li a.button.enquire {
    color: #fff;
    background-color: #5cb85c;
    border-color: #5cb85c;
    left:0px;
}

.service-blocks li a.button.learn {
    color: #fff;
    background-color: #384C6A;
    border-color: #384C6A;
    right:0px;
}

<div class="service-blocks">
  <ul>
    <li>
      <h2>Service 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, ligula quis convallis accumsan, ipsum ex lobortis risus, a malesuada orci turpis vel leo. Fusce sit amet arcu est. Ut mi nunc, vestibulum eu urna sed, blandit euismod est. Aliquam ut gravida orci. Sed varius iaculis diam, efficitur rutrum massa blandit sed. Nam in odio ornare, fringilla ex in, dapibus tortor. Aliquam aliquet ac dui sit amet fermentum.</p>
      <span class="button-container">
        <a href="/contact-us/" class="button left enquire" target="_blank">Enquire</a>
        <a href="/service-1/" class="button right learn">Learn More</a>
      </span>
    </li>
    <li>
      <h2>Service 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, ligula quis convallis accumsan, ipsum ex lobortis risus, a malesuada orci turpis vel leo. Fusce sit amet arcu est. Ut mi nunc, vestibulum eu urna sed, blandit euismod est. Aliquam ut gravida orci. Sed varius iaculis diam, efficitur rutrum massa blandit sed. Nam in odio ornare, fringilla ex in, dapibus tortor. Aliquam aliquet ac dui sit amet fermentum.</p>
      <span class="button-container">
        <a href="/contact-us/" class="button left enquire" target="_blank">Enquire</a>
        <a href="/service-2/" class="button right learn">Learn More</a>
      </span>
    </li>
    <li>
      <h2>Service 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, ligula quis convallis accumsan, ipsum ex lobortis risus, a malesuada orci turpis vel leo. Fusce sit amet arcu est. Ut mi nunc, vestibulum eu urna sed, blandit euismod est. Aliquam ut gravida orci. Sed varius iaculis diam, efficitur rutrum massa blandit sed. Nam in odio ornare, fringilla ex in, dapibus tortor. Aliquam aliquet ac dui sit amet fermentum.</p>
      <span class="button-container">
        <a href="/contact-us/" class="button left enquire" target="_blank">Enquire</a>
        <a href="/service-3/" class="button right learn">Learn More</a>
      </span>
    </li>    
  </ul>
</div>

将两个按钮（左侧和右侧）固定到动态容器的底部，该按钮可以响应

2 个答案: