产品项目：响应式布局答案

【问题标题】：Product Item: Responsive Layout产品项目：响应式布局
【发布时间】：2017-04-28 10:10:06
【问题描述】：

对于相对简单的响应式布局问题，我很难找到一个好的解决方案。

这是一个产品项组件，应该类似于 example。

它带来了某种等高要求（在桌面图像上对其他内容，在移动图像上对产品信息）。

单独来看，这不会是一个问题，但我很难为两个不同的视口找到一个没有重复内容/标记的好做法。

主要问题是包装/流动行为。通常我会在信息和细节周围放置一个包装器，但由于移动版本，这是不可能的。

也许可以给我一个很好的提示如何解决我的问题？

不胜感激

感谢和问候，eldaDev

.product-item {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #333;
}

.product-item__image {
  width: 25%;
  background-color: #ccc;
}

.product-item__info {
  width: 75%;
  background-color: green;
}

.product-item__detail {
  width: 100%;
  background-color: blue;
}

<!-- Markup example mobile version alike -->
<div class="product-item">
  <div class="product-item__image">img</div>
  <div class="product-item__info">info content</div>
  <div class="product-item__detail">detail content</div>
</div>

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

	.product-item {
  
}
	.product-item__image img{width:100%}
.product-item__image {
	    float: left;
    width: 20%;
    height: 400px;
    background: #ffd9d9;
}

.product-item__info {
	float: left;
    width: 80%;
    background: #f1f1f1;
    text-align: center;
    padding: 80px 0;
  
	}
.product-item__detail {
	
	float: left;
    width: 80%;
    background: #bfbfbf;
    text-align: center;
    padding: 80px 0;
  
}
	
@media  (max-width: 767px) {
.product-item__image {
	float: left;
	width:20%;  
}

.product-item__info {
    float: right;
    width: 70%;
    background: #f1f1f1;
    text-align: center;
    padding: 120px 0;
}
.product-item__detail {
    float: none;
    width: 100% !important;
    background: #bfbfbf;
    text-align: center;
    padding: 80px 0;
    clear: both;
}
	}

<div class="product-item">
 <div class="product-item__image">img</div>
  <div class="product-item__info">info content</div>
  <div class="product-item__detail">detail content</div>
</div>

【讨论】：

你能补充解释吗？在 SO 上通常不喜欢单独的代码块。

【解决方案2】：

试试这个：它对我有用。 float 和 @media() 用于使其响应。如果不起作用，请告诉我。帮助别人是我的荣幸:)

*{
  font-family: arial;
  color: #aaa;
  font-weight: normal;
}

.wrapper{
  border: solid 1px #363636;
  width: 500px;
  height: 200px;
  padding: 10px;
}


.image{
  float: left;
  height: 100px;
  width: 20%;
  border: solid 1px #363636;
}

.images > img{
  height: 90%;
}

.product_info{
  float: left;
  margin-left: 2%;
  border: solid 1px #363636;
  width: 77%;
  height: 100px;
  text-align: center;
}


.product_detail{
  float: left;
  margin-top: 2%;
  border: solid 1px #363636;
  width: 99%;
  text-align: center;
  height: 85px;
}


@media(max-width: 767px;){

  .image{
    float: left;
    height: 200px;
    width: 20%;
    border: solid 1px #363636;
  }
  
  .product_detail{
      float: right;
      margin-top: 2%;
      margin-left: 22%;
      border: solid 1px #363636;
      width: 77%;
      text-align: center;
      height: 85px;
    }

}

<center>Desktop</center>

<div class="wrapper">
  <div class="image">
    <img src="https://i.stack.imgur.com/D8dBds.png" alt="IMG">
  </div>
  
  <div class="product_info">
    <h1>Product Info</h1>
  </div>
  
  <div class="product_detail">
    <h1>Product Detail</h1>
  </div>
</div>

【讨论】：