Question

我遇到.gridSecBlock在我的视口中使用height:auto扩展时出现问题＆lt; 640.如果您单击下面的jsfiddle链接并将视口修改为小于640像素，您将看到内容.gridSecBlock的{{1}}不会像.gridText一样扩展{ {1}}。我有一个height: auto集，但不想为这么多媒体查询调整它。

然后由于某些原因，我的min-height课程并没有垂直居中total-center内容块。

有人看到我做错了吗？

Jsfiddle link to see mobile viewport

＆＃13;

.gridSecBlock

＆＃13;

.total-center {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}
.left {
	float: left;
}
.right {
	float: right;
}
.gridSecCont {
	display: block;
	height: 70vh;
}
.gridSecWrap {
	width: 100%;
	position: relative;
}
.gridSecBlock {
	width: 50%;
	height: 100%;
	display: inline-block;
	vertical-align: top;
	position: relative;
	overflow: hidden;
}
.gridSecBlock img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gridSecText {
	text-align: left;
}
.gridSecBlockWrap {
	width: 65%;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/

@media screen and (max-width:640px) {

/*--- Grid Section --*/
.gridSecCont {
	display: block;
	height: auto;
}
.gridSecBlock {
	width: 100%;
	height: auto;
	display: block;
	min-height: 270px;
}
.gridSecBlockWrap {
	width: 75%;
	height: auto;
	padding: 10px 0;
}

}

＆＃13;

Answer 1

我认为你可以使用flexbox轻松实现目标。我清理了一下，摆脱了看似不必要的div和其他风格。

也把它扔进了一个codepen：https://codepen.io/samandalso/pen/MXbYNz

.gridSecCont {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70vh;
}

.gridSecWrap {
  width: 100%;
  position: relative;
}

.gridSecBlock {
  overflow: hidden;
  flex-basis: 50%;
}

.gridSecBlock img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gridSecText {
  text-align: left;
  flex-basis: 50%;
  padding: 3rem;
}


/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/

@media screen and (max-width:640px) {
  /*--- Grid Section --*/
  .gridSecCont {
    display: block;
    height: auto;
  }
  .gridSecBlock {
    width: 100%;
    height: auto;
    display: block;
    min-height: 270px;
  }
  .gridSecBlockWrap {
    width: 75%;
    height: auto;
    padding: 10px 0;
  }
}

<section id="gridSec">
  <div class="gridSecWrap">
    <div class="gridSecCont">
      <div class="gridSecBlock left">
        <img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
      </div>
      <div class="gridSecBlock right gridText">
        <p class="dG gridSecText">
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
      </div>
    </div>
    <div class="gridSecCont">
      <div class="gridSecBlock right">
        <img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
      </div>
      <div class="gridSecBlock left gridText">
        <div class="total-center gridSecBlockWrap">
          <p class="dG gridSecText">
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

高度：自动扩展最小高度

1 个答案: