跨 div 对齐对象

Question

我在 3 div 的底部有 3 个按钮，我想保持水平对齐。我遇到的问题是，当调整浏览器窗口的大小时，按钮上方的文本会向下推动按钮并打乱水平对齐方式。如何设置以便在调整窗口大小时按钮保持水平对齐？

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
  background-color: lightblue;
}


/*  COLUMN SETUP  */

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
  padding-left: 20px;
  padding-right: 20px;
  background-color: yellow;
}

.col:first-child {
  margin-left: 0;
}


/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}


/*  GRID OF THREE  */

.span_3_of_3 {
  width: 100%;
}

.span_2_of_3 {
  width: 66.13%;
}

.span_1_of_3 {
  width: 32.26%;
}


/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
  .span_3_of_3,
  .span_2_of_3,
  .span_1_of_3 {
    width: 100%;
  }
}


/*  Text Style  */

.mytext {
  text-align: center;
}

<h1 style="font-size: 30px; color:#22326C; font-weight: 700; text-align: center;">Welcome Message</h1>

<p style="font-size: 16px; color:#22326C; font-weight: 500; text-align: center;">Use the buttons below to create a ticket:</p>

<div class="section group">
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Report an Issue</p>
    Use the button below if you would like to raise a support ticket for an issue you are experiencing with one of our products.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Enhancement Request</p>
    Use the button below if you would like to send us a request for an enhancement to an <strong><em>existing</em></strong> product feature.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Feature Request</p>
    Use the button below if you would like to send us a request for a <strong><em>new</em></strong> feature that you would like to see added to one of our products.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
</div>

Answer 1

将display: flex; 用于您的.section 类，并使用position: absolute; 将您的按钮放在底部，以使它们始终保持水平对齐。

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
  background-color: lightblue;
  display: flex;
}


/*  COLUMN SETUP  */

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;  
  background-color: yellow;
  position: relative;
  padding: 0 20px 25px 20px;
}
.col a {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.col:first-child {
  margin-left: 0;
}


/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}


/*  GRID OF THREE  */

.span_3_of_3 {
  width: 100%;
}

.span_2_of_3 {
  width: 66.13%;
}

.span_1_of_3 {
  width: 32.26%;
}


/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
  .section{
   display: block;
  }
  .col {
   margin: 1% 0 1% 0%;
   box-sizing: border-box;
  }
  .span_3_of_3,
  .span_2_of_3,
  .span_1_of_3 {
    width: 100%;
  }
}


/*  Text Style  */

.mytext {
  text-align: center;
}

<h1 style="font-size: 30px; color:#22326C; font-weight: 700; text-align: center;">Welcome Message</h1>

<p style="font-size: 16px; color:#22326C; font-weight: 500; text-align: center;">Use the buttons below to create a ticket:</p>

<div class="section group">
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Report an Issue</p>
    Use the button below if you would like to raise a support ticket for an issue you are experiencing with one of our products.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Enhancement Request</p>
    Use the button below if you would like to send us a request for an enhancement to an <strong><em>existing</em></strong> product feature.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Feature Request</p>
    Use the button below if you would like to send us a request for a <strong><em>new</em></strong> feature that you would like to see added to one of our products.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
</div>

Answer 2

你需要在.col里面使用box-sizing:border-box;

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
  background-color: lightblue;
}


/*  COLUMN SETUP  */

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
  padding-left: 20px;
  padding-right: 20px;
  background-color: yellow;
  box-sizing:border-box;
}

.col:first-child {
  margin-left: 0;
}


/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}


/*  GRID OF THREE  */

.span_3_of_3 {
  width: 100%;
}

.span_2_of_3 {
  width: 66.13%;
}

.span_1_of_3 {
  width: 32.26%;
}


/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
  .span_3_of_3,
  .span_2_of_3,
  .span_1_of_3 {
    width: 100%;
  }
}


/*  Text Style  */

.mytext {
  text-align: center;
}

<h1 style="font-size: 30px; color:#22326C; font-weight: 700; text-align: center;">Welcome Message</h1>

<p style="font-size: 16px; color:#22326C; font-weight: 500; text-align: center;">Use the buttons below to create a ticket:</p>

<div class="section group">
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Report an Issue</p>
    Use the button below if you would like to raise a support ticket for an issue you are experiencing with one of our products.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Enhancement Request</p>
    Use the button below if you would like to send us a request for an enhancement to an <strong><em>existing</em></strong> product feature.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Feature Request</p>
    Use the button below if you would like to send us a request for a <strong><em>new</em></strong> feature that you would like to see added to one of our products.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
</div>

Answer 3

你可以简单地给 div 一个固定的高度并设置 overflow-y:auto; 希望这会奏效，干杯...

.mytext{
    height:300px;
    overflow-y:auto;
}

或者你也可以尝试给出 min-height 或 max-height 属性