在div之间对齐对象

时间：2017-08-17 05:23:29

标签： html css

我在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>

3 个答案:

答案 0 :(得分：2)

将.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>
pushd /Users/rajkumarpurushothaman/Documents/Spring/spring-project‌​-5
git add .
git commit -m "a message"
git push
popd

答案 1 :(得分：1)

您需要在box-sizing:border-box;

中使用.col

＆＃13;
＆＃13; 
/*  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

你只需给div一个固定的高度并设置overflow-y：auto; 希望这会奏效，欢呼...... 

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

或者您也可以尝试给出最小高度或最大高度属性

相关问题
最新问题