确保图片，标题，段落和按钮保持水平，标题和段落的长度大小不同

时间：2018-08-02 20:16:51

标签： html css

我想要实现的是所有图像都处于同一级别，所有标题和段落级别都不管它们的长度如何，以及一个按钮，之后它们都处于同一级别...我也正在尝试制作9x9网格，但是一旦我添加更多列，它们便开始彼此相邻而不是在下面... 

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

.flex-container .box {
  width: 50%;
  margin: 10px;
  text-align: center;
}

.container {
  padding-top: 30px;
  height: 300px;
  text-align: center;
  min-width: 280px;
  height: 100%;
  margin-left: 100px;
  margin-right: 100px;
  display: flex;
  justify-content: space-between;
}

.box h2 {
  text-align: center;
  font-family: "Slabo 27px", serif;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  padding-left: 25px;
  padding-right: 25px;
}

.box p {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 19px;
  text-align: center;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 10px;
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 800px) {
  .column {
    text-align: center;
    float: left;
    width: 50%;
  }
}

.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.3s;
  /* Safari */
  transition-duration: 0.3s;
  cursor: pointer;
}

.button {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
  text-align: center;
  padding-bottom: 20px;
  width: 50%;
  margin: auto;
  align-self: flex-end;
}

.button:hover {
  background-color: #008CBA;
  color: white;
}
<div class="container">
  <div class="flex-container">
    <div class="box">
      <a href="#">
        <img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
      </a>
      <h2>Example Header</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. </p>
      <div>
        <a href="/" class="button">Learn more</a>
      </div>
    </div>
    <div class="box">
      <a href="#">
        <img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
      </a>
      <h2>Longer example of a header blah </h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
        porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper.</p>
      <div>
        <a href="/" class="button">Learn more</a>
      </div>
    </div>
    <div class="box">
      <a href="#">
        <img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
      </a>
      <h2>another short example </h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
        porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper. Proin est ipsum, rutrum ac est ut, mollis mollis elit. Curabitur eget dolor gravida, rhoncus arcu eget,
        rhoncus ante. Nulla rhoncus in mauris et consequat. </p>
      <div>
        <a href="/" class="button">Learn more</a>
      </div>
    </div>
  </div>

这是目前我所拥有的最好的，我已经将所有图像，标题和文本设置为同一级别，但是一旦我将按钮设置为水平，标题或段落就不会处于水平状态了……对此任何帮助太神奇了！

1 个答案:

答案 0 :(得分：0)

如果可以设置一些高度和一些overflow: hidden;，则可以这样做：

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

.flex-container .box {
  width: 50%;
  margin: 10px;
  text-align: center;
}

.container {
  padding-top: 30px;
  height: 300px;
  text-align: center;
  min-width: 280px;
  height: 100%;
  margin-left: 100px;
  margin-right: 100px;
  display: flex;
  justify-content: space-between;
}

.box h2 {
  text-align: center;
  font-family: "Slabo 27px", serif;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  padding-left: 25px;
  padding-right: 25px;
  /* ! */
  overflow: hidden;
  height: 3.6em;
}

.box p {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 19px;
  text-align: center;
  padding-left: 25px;
  padding-right: 25px;
  margin-bottom: 40px;
  /* ! */
  overflow: hidden;
  height: 12.6em;
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 800px) {
  .column {
    text-align: center;
    float: left;
    width: 50%;
  }
}

.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.3s;
  /* Safari */
  transition-duration: 0.3s;
  cursor: pointer;
}

.button {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
  text-align: center;
  padding-bottom: 20px;
  width: 50%;
  margin: auto;
  align-self: flex-end;
}

.button:hover {
  background-color: #008CBA;
  color: white;
}

/* ! */
.fade {
  position: relative;
  height: 3.6em;
}
/* ! */
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
<div class="container">
  <div class="flex-container">
    <div class="box">
      <a href="#">
        <img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
      </a>
      <div>
        <h2 class="fade">Example Header</h2>
        <p class="fade"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. </p>
      </div>
      <div>
        <a href="/" class="button">Learn more</a>
      </div>
    </div>
    <div class="box">
      <a href="#">
        <img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
      </a>
      <h2 class="fade">Longer example of a header blah blah blah </h2>
      <p class="fade"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
        porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper.</p>
      <div>
        <a href="/" class="button">Learn more</a>
      </div>
    </div>
    <div class="box">
      <a href="#">
        <img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
      </a>
      <h2 class="fade">another short example </h2>
      <p class="fade"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
        porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper. Proin est ipsum, rutrum ac est ut, mollis mollis elit. Curabitur eget dolor gravida, rhoncus arcu eget,
        rhoncus ante. Nulla rhoncus in mauris et consequat. </p>
      <div>
        <a href="/" class="button">Learn more</a>
      </div>
    </div>
  </div>

流量衰减thing来自here，在这里您还可以找到解决问题的其他方法。希望这会有所帮助。

相关问题
最新问题