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

此处前半部分为var files = $([{ "Key": ".txt" }]) .filter(function (i, n) { return n.Key === ".txt"; });，第二部分为<img>

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

链接中的代码在这里

<textbox>

的CSS：

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

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/

响应式图像和文本并排

2 个答案: