Question

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

它是一个产品项目组件，应该与此example类似。

它带来了某种同等高度要求（在桌面上img到其他内容，在移动img到product-info）。

单独使用它本身就是一个问题，但我很难找到两个不同视口的良好练习而没有重复的内容/标记。

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

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

非常感谢

谢谢和问候，eldaDev

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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()过去常常使其响应。如果不行，请告诉我。我很乐意帮助别人：）

＆＃13;

*{
  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;
    }

}

＆＃13;

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

＆＃13;

产品项目：响应式布局

2 个答案: