如何创建响应式产品列表视图

Question

我正在尝试从头开始在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>

任何人都可以就此问题提供建议吗？

提前谢谢。

Answer 1

我认为您可能需要在另一个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>

这可能会有所帮助(如果没有，那么我很抱歉(

Answer 2

如果您确实想要容纳所有屏幕尺寸(视口(，则实际上需要识别视口属性并相应地应用不同的 CSS 调整。根本没有一个放之四海而皆准的解决方案。(欢迎来到智能手机的精彩世界哈哈(。

但是，请尝试确定您的用户最有可能访问您的系统的技术是什么，并首先使用它。在跨平台跨设备上全力以赴是一项艰巨的工作，所以不要气馁，向一个人提出要求很多，如果您愿意或需要这样做，需要时间。

至于按钮 - 它目前与图像和文本卡在同一个容器中。 只需将其从中拉出：

<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>
<div class="cartBtn">
Add to cart
</div>

Answer 3

问题.p_img { height:100%; .现在你不需要它(你可以解决它的其他问题(，但让我们坚持下去。所以你需要做的是你需要float图像。漂浮不是一件好事，但如果你不要忘记清除漂浮物，效果很好。检查代码中的注释。

.contentHolder{
  width:90%;
  height:200px;
  background-color:#fff;
  display:inline-block;
  position:relative;
  border:solid 1px #ccc;
  padding:10px;
  border-radius:5px;
}
/* add this block, this will clear the float! */
.contentHolder:after {
    content: '';
    display: block;
    clear: both;
}
.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;
  
  float: left; /* add this line */
}
.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;
  
  margin: 20px 0 0 20px; /* add this line */
}

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