html - 如何创建响应式产品 ListView ？

我正在尝试从头开始在CSS中创建响应列表视图。

但是，我的问题是绿色按钮不在应有的位置。

它不位于图像旁边和文本下方。

另外，当我将屏幕尺寸调整为较小尺寸时，列表的布局会变得混乱，但是我需要让它看起来（或多或少）以在每个屏幕尺寸上都相似。

这是我到目前为止所拥有的：

.contentHolder {
  width: 90%;
  height: 200px;
  background-color: #fff;
  display: inline-block;
  position: relative;
  border: solid 1px #ccc;
  padding: 10px;
  border-radius: 5px;
}

.contentHolder p {
  width: 100%;
  padding-left: 10px;
  margin: 0;
}

.txtHolder {
  width: 65%;
  display: inline-block;
  vertical-align: top;
  padding-left: 10px;
  max-height: 120px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 0;
}

.p_img {
  width: 30%;
  height: 100%;
  display: inline-block;
  background-image: url(https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 5px;
  vertical-align: top;
}

.cartBtn {
  width: 200px;
  line-height: 20px;
  background: green;
  color: #fff;
  display: inline-block;
  vertical-align: top;
  float: left;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
}

<div class="contentHolder">

  <div class="p_img"></div>

  <div class="txtHolder">
    <p>Hello wordl, this is some dummy text that goes here very nicely and tidy... Enjoy reading me when you can...Hello wordl, this is some dummy text that goes here very nicely and tidy... Enjoy reading me when you can...Hello wordl, this is some dummy
      text that goes here very nicely and tidy... Enjoy reading me when you can...</p>
  </div>

  <div class="cartBtn">
    Add to cart
  </div>

</div>

任何人都可以在这个问题上提出建议吗？

提前致谢。

最佳答案

我认为您可能需要将所有div放在另一个div中（这可能有助于格式化按钮）

例如：

<div class="item">
<div class="img"></div>
<div class="itmDesc">
Hi I am text how are you?
</div>
<div class="cartBtn">
Add to cart
</div>
</div>

这可能会有所帮助（如果没有，那么对不起）

关于html - 如何创建响应式产品 ListView ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48479500/