产品项:响应式布局

Question

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

它是一个产品项组件，在这个example中应该是这样的。

它带来了一些等高的要求(在桌面img到其他内容，在移动img到product-info)。

作为独立的，这不是一个问题，但我努力为两个不同的视点没有重复的内容/标记找到一个好的实践。

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

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

将不胜感激

致谢和问候，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>

​

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

​

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

​