Question

我尝试响应（全宽！）对齐三个背景图像+文本。这是布局：

********************************************************
*                           *                          *
*                           * background 2 (width 50%) *
*                           *                          *
* background 1 (width 50%)  ****************************
*                           *                          *
*                           * background 3 (width 50%) *
*                           *                          *
********************************************************

无论我做什么，我都无法实现这一目标。我到处搜索，无法找到解决方案。有人可以帮忙吗？要求是这个块总是保持相同的高度，没有固定的宽度，因为它必须响应（图像在浏览器调整大小时相应缩小），而在移动设备上它应该变成三行。在每个背景上我需要添加不同数量的文本，但整个块必须始终保持相同的高度！另外，我不想使用javascript，是否可以仅使用html / css实现此目的并保持浏览器兼容性？

请帮忙！

感谢!!!

Answer 1

react-native start

.img-container {
    width:50%;float:left;
}    

.img {
    width: 100%;
}

根据需要调整图像上方的文字......

Answer 2

希望这适合你。

＆＃13;

#wrapper {
  width: 100%;
  float: left;
}
#left {
  float: left;
  width: 50%;
  height: 200px;
  background: red;
}
#right {
  float: left;
  width: 50%;
  height: 200px;
}
#right div {
  height: 50%;
}
#right div:first-child {
  background: blue;
}
#right div:last-child {
  background: orange;
}

＆＃13;

<div id="wrapper">
  <div id="left">background 1</div>
  <div id="right">
    <div>background 2</div>
    <div>background 3</div>
  </div>
</div>

＆＃13;

对齐背景图像

2 个答案: