Question

自从我真正编码以来已经有一段时间了，我的头脑根本无法解决这个（简单）问题。我需要在页面顶部放置一个横幅，该横幅的右侧为一幅图像，左侧为一处长文本，其中BG与实际图像融合在一起。我还需要以较小的屏幕尺寸将图像堆叠在文本顶部。我可能遇到很多东西。使文本与图像垂直对齐，使文本div与图像高度相等，最重要的是使2正确堆叠。当它们堆叠时，我需要图像调整大小并填充100％，文本在图像下方居中。任何帮助都会很棒。我知道，这是一个非常简单的问题，我确定这里有很多多余或不必要的东西……

* {
    box-sizing: border-box;
}

.row {
  display: block;
  width: 100%;
  vertical-align:middle;
  align-content:center;
  text-align:center

}

.column2 {
    float: left;
    width: 35%;
    padding: 0px;
	vertical-align:middle; 
	min-width: 250px;
	align-content:center
}

.column1 {
    float: right;
    padding: 0px;  
	max-width: 65% ;
	min-width: 250px;
		align-content:center

}

.column1 img {
  max-width: 100%;
  height: auto;
 }

/* Clearfix (clear floats) */
.row::after {
    content: "";
    clear: both;
    display: table;
}

img {
width:100%;
height: auto;
}

@media screen and (max-width: 500px) {
    .column1 .column2 { display: block; }
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
    .column1 {
        width: 100%; height: auto
    }
    
    .column2 {
        width: 100%; background:#ffffff
    }
	
}

	@media screen and (min-width: 501px)  {
		
		.row {
			  background:#f2f1eb
		}
	}

<div class="row">
  <div class="column1">
    <img src="https://picsum.photos/1200/300/?gravity=east" alt="Dog" style="width:100%; align-content:center; vertical-align:middle">
  </div>
  <div class="column2">
    <div style="width:100%; vertical-align:middle"><p align="center" style="vertical-align:middle">We love having your family members as part of our community. </p> </div>
  </div>




</div>

Answer 1

我不确定我是否正确理解了要实现的目标（因为您没有回答我的问题），但是如果您希望图像和文本以高分辨率对齐并以小分辨率堆叠：

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  align-items: stretch;
  background: #efefef;
}

.column1 {
  width: 35%;
  min-width: 250px;
  display: flex;
  align-items: center;
}

.column2 {
  width: 65%;
}

.text {
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin: 0;
  font: 14px/1.5 arial, sans-serif;
  text-align: center;
}

.column1 img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 575px) {
  .row {
    flex-direction: column;
  }
  .column1, .column2 {width: 100%}
  .column1 {
    order: 2;
  }
  .text {
    padding: 15px 10px;
  }
}

<div class="row">
  <div class="column1">
    <p class="text">We love having your family members as part of our community.</p>
  </div>
  <div class="column2">
    <img src="https://picsum.photos/1200/300/?gravity=east" alt="Dog" style="width:100%; align-content:center; vertical-align:middle">
  </div>
</div>

内嵌图像和文本并堆叠以进行响应

1 个答案: