图像容器底部未与其他网格容器对齐

Question

​

你好,

正如你从上面的照片中看到的，我正在尝试实现一个网格系统。第一个网格是3个图像，第二个网格是一个列，第三个网格是漂浮在第二个网格右侧的一个大图像。你可以在我的作品集网站上看到这张照片：http://www.irwinlitvak.com

我在第一个网格中有三个图像，宽度为31.33%，第一个和第二个img的右边距为3.005%，以填满容器的宽度。

在下一个网格(网格-2)中，我的两个图像在列中向左浮动，(网格-2- of -3)以65.556%的宽度向右浮动。

我希望大图的顶部和底部占据整个网格的高度，这样大图的底部就会与自毁框对齐。

以下是HTML和CSS：

​

.projects-grid {
  margin: 100px auto 0;
  width: 90%;
}

.projects-grid .title {
  margin-bottom: 20px;
  text-align: center;
}

.projects-grid h1 {
  display: inline-block;
  font-family: "Montserrat";
}

.grid-1 {
  margin-bottom: 4%;
}

.grid-1-of-3 {
  position: relative;
  width: 31.33%;
  float: left;
  overflow: hidden;
}

.grid-2-of-3 {
  position: relative;
  width: 65.556%;
  float: right;
}

.grid-1-of-3:first-child,
.grid-1-of-3:nth-child(2) {
  margin-right: 3.005%;
}

.grid-3 {
  position: relative;
  display: inline-block;
  width: 33%;
  margin-bottom: 60px;
  vertical-align: bottom;
}

.grid-5 {
  position: relative;
  display: inline-block;
  width: 20%;
  margin-bottom: 60px;
  vertical-align: bottom;
}

.box-1 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.grid-1-of-3:first-child {
  margin-left: 0;
}

.grid-1-of-3:last-child {
  margin-right: 0;
}

.big-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.grid-2 {
  width: 31.33%;
  float: left;
}

.grid-2 .box-cont {
  width: 100%;
}

.grid-2 .box-cont:first-child {
  margin-bottom: 4%;
}

.grid-2 .box-cont {
  position: relative;
}

<section class="projects-grid clearfix">

  <div class="row title">
    <h2>Projects</h2>
  </div>

  <div class="grid-1 clearfix">
    <div class="grid-1-of-3">

      <div class="box-1">
        <a href="">
          <img class="bdgt-app" src="assets/budget-app-x-ps.jpg" alt="budget-app pic">
        </a>
        <a href="https://budget-app-x.herokuapp.com/" target="_blank">
          <div class="box-overlay">
            <div class="text-overlay">
              <h3>Budget-App-X</h3>
              <p>Manage your incomes and expenses in a fun and easy app.</p>
            </div>
          </div>
        </a>
      </div>

      <h3>
        <a href="https://budget-app-x.herokuapp.com/" target="_blank">Budget-App-X</a>
      </h3>
    </div>

    <div class="grid-1-of-3">
      <div class="box-1">
        <a href="">
          <img src="/assets/dice-game-x-ps.jpg" alt="dice-game">
        </a>
        <a href="https://dice-game-x.herokuapp.com/" target="_blank">
          <div class="box-overlay">
            <div class="text-overlay">
              <h3>Dice-Game</h3>
              <p>Roll the dice. Test your luck and see who racks the most points.</p>
            </div>
          </div>
        </a>
      </div>
      <h3>
        <a href="https://dice-game-x.herokuapp.com/" target="_blank">Dice-Game</a>
      </h3>

    </div>

    <div class="grid-1-of-3">
      <div class="box-1">
        <a href="">
          <img src="/assets/pomodoro-timer-x-ps.jpg" alt="pomodoro-app-timer">
        </a>
        <a href="http://pomodoro-app-timer.herokuapp.com" target="_blank">
          <div class="box-overlay">
            <div class="text-overlay">
              <h3>Pomodoro-Timer</h3>
              <p>A quick and easy solution to being productive. Set the time and get things done.</p>
            </div>
          </div>
        </a>
      </div>

      <h3>
        <a href="http://pomodoro-app-timer.herokuapp.com" target="_blank">Pomodoro-Timer</a>
      </h3>
    </div>
  </div>

  <div class="grid-2 clearfix">

    <div class="box-cont">
      <div class="box-1">
        <a href="">
          <img src="/assets/cucumberme-x-ps.jpg" alt="cucumber me">
        </a>
        <a href="http://www.cucumberme.com" target="_blank">
          <div class="box-overlay">
            <div class="text-overlay">
              <h3>CucumberMe</h3>
              <p>CucumberMe is your way of anonymously sending cucumbers to a friend, ex or anyone you want.<br><br> Go and send one today! </p>
            </div>
          </div>
        </a>
      </div>

      <h3>
        <a href="http://www.cucumberme.com" target="_blank">CucumberMe</a>
      </h3>

    </div>

    <div class="box-cont">
      <div class="box-1">
        <a href="#">
          <img src="/assets/self-destruct-x-ps.jpg" alt="to do list">
        </a>
        <a href="http://todos-irwin.herokuapp.com/" target="_blank">
          <div class="box-overlay">
            <div class="text-overlay">
              <h3>Self Destructing To-Do-List</h3>
              <p>A to-do-list that will delete itself within 10 seconds. How many chores can you list within that time? </p>
            </div>
          </div>
        </a>
      </div>
      <h3>
        <a href="http://todos-irwin.herokuapp.com/" target="_blank"> 
                                Self Destructing To-Do-List
                            </a>
      </h3>
    </div>
  </div>

  <div class="grid-2-of-3 clearfix">
    <div class="box-cont">
      <div class="big-box">
        <a href="#">
          <img src="/assets/omnifood-x-ps.jpg" alt="omnifood">
        </a>
        <a href="http://con.staging.thegateny.net/con/Omnifood/v1/" target="_blank">
          <div class="box-overlay big-overlay">
            <div class="text-overlay">
              <h3>Omnifood</h3>
              <p>My version of the food app Blue Apron. Take a look! </p>
            </div>
          </div>
        </a>
      </div>

      <h3>
        <a href="http://con.staging.thegateny.net/con/Omnifood/v1/" target="_blank">
                                Omnifood
                            </a>
      </h3>
    </div>
  </div>
</section>

​

Answer 1

你能做的就像我在下面的代码片段中展示的那样。你有一个容器来存放所有你想要的相同高度的div，你给它一个设置的高度。然后为左边的项提供一个容器(使用height: 100%)，并为右边的项创建一个div (height: 100%)。

通过这样做，你就有了一个容器来存放左边的物品，所以你可以让它们每个都有50%的高度，并且你有一个与左边容器高度相同的右边的物品。

为了使图像适合div，可以使用background-size: cover或类似的工具。height:100%; width: auto也适用于响应式图像。

希望能有所帮助。

​

.outer {
background: blue;
width: 600px;
height: 200px;
}

.leftwrap {
width: 30%;
float: left;
height: 100%;
}

.left1 {
background: purple;
width: 100%;
height: 50%;
}

.left2 {
background: orange;
width: 100%;
height: 50%;
}

.right {
background: teal;
height: 100%;
width: 70%;
float: left;
}

/** New code **/
.image {
  height: 80%;
  width: auto;
  border: 1px solid black;
}

.imagetext {
  color: white;
  text-align: center;
  border: 1px solid black;
}

.left {
  box-sizing: border-box;
  padding-bottom: 30px;
}

<div class='outer'>
  <div class='leftwrap'>
    <div class='left left1'>
      <div class="image">My image here</div>
      <div class="imagetext">Some text</div>
    </div>
    <div class='left left2'>
      <div class="image">My image here</div>
      <div class="imagetext">Some text</div>
    </div>
  </div>
  <div class='right'>3</div>
</div>

​