我可以在不更改HTML的情况下重新订购这些div吗？

Question

我有一个电子商务平台，其产品图片在产品标题和说明之前显示在DOM中。我无权更改HTML，但我想知道是否有办法用CSS重新排序这些元素？

这是HTML

<div id="wrapper">
  <div id="img">Img</div> 
  <div id="Content">
     <div id="title">
       Title
     </div>
     <div id="description">
       Description
     </div>
  </div>
</div>

我试图让#content超越＃img，但遗憾的是没有运气。

这是一个演示。

Demo Link Here

Answer 1

您可以使用flexbox执行此操作：

div {
  margin:2px;
}
#wrapper {
  background-color:red;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:column;
  -webkit-flex-direction:column;
  flex-direction:column;
}
#img {
  background-color:blue;
  height:100px;
  width:100px;
  -ms-flex-order:2;
  -webkit-order:2;
  order:2;  
}
#title {
  background-color:yellow;   
}
#description {
  background-color:green;
}
#Content {
  -ms-flex-order:1;
  -webkit-order:1;
  order:1;  
}

<div id="wrapper">
  <div id="img">Img</div> 
  <div id="Content">
    <div id="title">Title</div>
    <div id="description">Description</div>
  </div>
</div>

Answer 2

有很多不同的方法可以做到这一点。塞巴斯蒂安已经谈过弹性盒子了。如果您创建包装器div position:relative，则任何具有position:absolute的子元素将绝对移动到该元素中（而不是页面）。这非常快，但您可以随时更改数字以使其更具吸引力。

＆＃13;

＆＃13;

#wrapper {
  position: relative;
  width: 100%;
  min-height: 50px;
}
#img {
  position: absolute;
  right: 5px;
  top: 10px;
}
#title {
  left: 10px;
  height: 10px;
  top: 0;
}
#description {
  top: 15px;
  left: 0;
  padding-top: 10px;
}

＆＃13;

<div id="wrapper">
  <div id="img">Img</div>
  <div id="Content">
    <div id="title">
      Title
    </div>
    <div id="description">
      Description
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

侧注##

如果您计划拥有多个副本，我会将id=...用于所有这些更改为class=...。 ID是唯一的，类是可重复的。

＆＃13;

＆＃13;

    .wrapper {
      position: relative;
      width: 100%;
      min-height: 50px;
    }
    .img {
      position: absolute;
      right: 5px;
      top: 10px;
    }
    .title {
      left: 10px;
      height: 10px;
      top: 0;
    }
    .description {
      top: 15px;
      left: 0;
      padding-top: 10px;
    }

＆＃13;

<div class="wrapper">
  <div class="img">Img</div>
  <div class="Content">
    <div class="title">
      Title
    </div>
    <div class="description">
      Description
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="img">Img</div>
  <div class="Content">
    <div class="title">
      Title
    </div>
    <div class="description">
      Description
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用CSS表格+表格标题。

<强> jsFiddle

＆＃13;

＆＃13;

#wrapper {
  display: table;
  width: 100%;
}
#content {
  display: table-caption; 
}

＆＃13;

<div id="wrapper">
  <div id="img">Img</div>
  <div id="content">
    <div id="title">
      Title
    </div>
    <div id="description">
      Description
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者，使用flexbox并将其设置为反向列。

<强> jsFiddle

＆＃13;

＆＃13;

#wrapper {
  display: flex;
  flex-direction: column-reverse;
}

＆＃13;

<div id="wrapper">
  <div id="img">Img</div>
  <div id="content">
    <div id="title">
      Title
    </div>
    <div id="description">
      Description
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;