时间戳

首页 > 解决方案 > 图像和文本内联和堆叠以实现响应式

image - 图像和文本内联和堆叠以实现响应式

问题描述

自从我真正编码以来已经有一段时间了，我的头脑就是无法解决这个（简单的）问题。我需要在页面顶部有一个横幅，该横幅在右侧有一个图像，在左侧有一个看起来是一个长图像的文本，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>

标签： imagetextinlineresponsivebanner

解决方案

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

* {
  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>

推荐阅读