并排响应式图像和文本

Question

我正在尝试制作 2 列：

第一个是占据页面 50% 的图像，另一个是占据页面剩余 50% 的文本框。 没有边距。

是否有可能有这样的响应？ 我正在努力使背景颜色与图像对齐。

 .imagebox { width: 50%; float: left; } .textbox { width: 50%; float: right; text-align: center; padding-top: 20px; background-color: #666; color: #fff; }

 <div class="imagebox"> <img src="http://www.mokshasoulyoga.com/wp-content/uploads/2017/04/5.png" width="100%" height="auto" /> </div> <div class="textbox"> <h2>Title Here</h2> <p>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.</p> <a href="#">Read More</a> </div>

Answer 1

这里前半部分是<img> ，第二部分是<textbox>

https://jsfiddle.net/b8ow0noy/1/

链接中的代码在这里

<div style="width: 50%; float:left">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
</div>

<div style="width: 50%; float:right">
<textbox>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   </textbox>
</div>

css：

div{
  margins:0 px;
  overflow:hidden;
}

Answer 2

将您的 .textbox 包裹在一个容器中（在我的情况下，容器的类是 .textbox-cont）。 给 imagebox 和 textbox-cont 一个固定的高度。 从文本框中删除浮动属性将其应用于 .textbox-cont。 现在分别相对于 .imagebox 和 .textbox-cont 定位图像和文本框。 对 img 和 .textbox 使用绝对位置，并将其放置在距容器顶部 50% 的位置，如下所示：

.imagebox img{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

.textbox{
  background-color: #666;
  color: #fff;
  position:absolute;
  text-align: center;
  width:100%;
  top:50%;
  transform:translateY(-50%);
 }

这将解决问题。 此外，如果您想让它具有响应性，请使用如下媒体查询：

@media only screen and (max-width: 700px) {
  .imagebox,
  .textbox-cont{
    width:100%;
    height:200px;
   }
}

玩转断点（最大宽度）并将其更改为最适合您的任何内容。 还要像这样将每个元素的box-sizing 属性更改为border-box以修复任何边距或填充问题：

*{
  box-sizing:border-box;
}

最后的片段：

 *{ box-sizing:border-box; } .imagebox { width: 50%; float: left; height:300px; position:relative; } .imagebox img{ position:absolute; top:50%; transform:translateY(-50%); overflow:hidden; } .textbox-cont { width: 50%; height:300px; float: right; position:relative; overflow:hidden; } .textbox{ background-color: #666; color: #fff; position:absolute; text-align: center; width:100%; padding:20px; top:50%; transform:translateY(-50%); } @media only screen and (max-width: 700px) { .imagebox, .textbox-cont{ width:100%; height:200px; } }

 <div class="imagebox"> <img src="http://www.mokshasoulyoga.com/wp-content/uploads/2017/04/5.png" width="100%" height="auto" /> </div> <div class="textbox-cont"> <div class="textbox"> <h2>Title Here</h2> <p>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. </p> <a href="#">Read More</a> </div> </div>

如果您想了解 box-sizing:border-box 的相关信息，请查看这里 => https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

这是一篇关于响应式网页设计的好文章： https : //blog.froont.com/9-basic-principles-of-responsive-web-design/

Answer 3

以下答案是响应式的，但在小宽度时，图像会非常窄，并且可能裁剪得太多。 在某个断点处，您可能希望将并排布局转换为堆叠的单列。

 .wrap { display: flex; } .wrap>* { flex: 1; } .imagebox { position: relative; } img { width: 100%; height: 100%; object-fit: cover; } .textbox { padding: 1rem; background-color: #666; color: #fff; }

 <div class="wrap"> <div class="imagebox"> <img src="http://www.mokshasoulyoga.com/wp-content/uploads/2017/04/5.png" width="100%" height="auto" /> </div> <div class="textbox"> <h2>Title Here</h2> <p>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.</p> <a href="#">Read More</a> </div> </div>