使用CSS更改元素布局而不更改HTML

Question

我有由三个div组成的HTML标记：

<div class="gallery">Gallery</div>
<div class="content">Content</div>
<div class="sidebar">Sidebar</div>

我想使用CSS将其显示在两个不同的布局中(如果我能够控制侧边栏是出现在左边还是右边，会更好)：

+------------------+
| Gallery          |
+------+-----------+
| Side | Content   |
|      |           |
+------+-----------+

+------+-----------+
| Side | Gallery   |
+      +-----------+
|      | Content   |
|      |           |
+------+-----------+

事实上，如果我能够控制侧边栏是出现在左边还是右边，那就更好了。

我可以添加额外的div和/或更改div的源顺序，只要内容出现在侧栏之前。但是HTML不能在每个布局的基础上进行更改。

下面是我使用flexbox + order属性解决这个问题的不完全尝试。

​

/* for demonstration */
.gallery { height: 100px; background-color: #CCC;  }
.content { height: 200px; background-color: #EEE; }
.sidebar { height: 150px; background-color: #AAA; }
/* common */
.middle { display: flex; flex-direction: row; flex-wrap: wrap; }
/* layout-1 */
.middle.layout-1 .gallery { order: 1; width: 100%; }
.middle.layout-1 .content { order: 3; width:  75%; }
.middle.layout-1 .sidebar { order: 2; width:  25%; }
/* layout-2 */
.middle.layout-2 .gallery { order: 2; width: 75%; }
.middle.layout-2 .content { order: 3; width: 75%; }
.middle.layout-2 .sidebar { order: 1; width: 25%; }

<div class="middle layout-1">
  <div class="gallery">Gallery</div>
  <div class="content">Content (this layout works perfectly)</div>
  <div class="sidebar">Sidebar</div>
</div>
<hr>
<div class="middle layout-2">
  <div class="gallery">Gallery</div>
  <div class="content">Content (should go below gallery)</div>
  <div class="sidebar">Sidebar</div>
</div>

​

Answer 1

通常我避免像瘟疫一样漂浮，但在这种情况下，他们会做你需要做的事情。

如果您想切换侧边栏的一侧，只需交换窗口和权限即可。

这将使您的布局保持动态大小：

​

.gallery {
  background: red;
}
.content {
  background: green;
}
.sidebar {
  background: blue;
}
/* layout1 */
.layout1 .gallery {
  width: 100%;
}
.layout1 .content {
  width: 75%;
  float: right;
}
.layout1 .sidebar {
  width: 25%;
  float: left;
}
/* layout2 */
.layout2 .gallery {
  width: 75%;
  float: right;
}
.layout2 .content {
  width: 75%;
  float: right;
}
.layout2 .sidebar {
  width: 25%;
}

<div class="layout1">
  <div class="gallery">Gallery</div>
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
</div>
<br>
<br>
<br>
<div class="layout2">
  <div class="gallery">Gallery</div>
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
</div>

​

Answer 2

如果包含像这个演示这样的div，请检查.middle.layout-2。

HTML：

<div class="middle layout-1">
  <div class="gallery">Gallery</div>
  <div class="content">Content (this layout works perfectly)</div>
  <div class="sidebar">Sidebar</div>
</div>
<hr>
<div class="middle layout-2">
  <div class="gallery">Gallery</div>
  <div class="content">Content (should go below gallery)</div>
  <div class="sidebar">Sidebar</div>
</div>

CSS：

/* for demonstration */
.gallery { height: 100px; background-color: #CCC;  }
.content { height: 200px; background-color: #EEE; }
.sidebar { height: 200px; background-color: #AAA; }
/* common */
.middle { display: flex; flex-direction: row; flex-wrap: wrap; }
/* layout-1 */
.middle.layout-1 .gallery { order: 1; width: 100%; }
.middle.layout-1 .content { order: 3; width:  75%; }
.middle.layout-1 .sidebar { order: 2; width:  25%; }
/* layout-2 */
.middle.layout-2 { position: relative; }
.middle.layout-2 .gallery { width: 75%; margin-left: 25%; }
.middle.layout-2 .content { width: 75%; margin-left: 25%; }
.middle.layout-2 .sidebar { position: absolute; top: 0; left: 0; width: 25%; height: 100%;}

Answer 3

如果这是你想要的，请告诉我：

HTML：

First Layout
<div class="container one">
    <div class="gallery">Gallery</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
</div>
<br/>Second Layout
<div class="container two">
    <div class="gallery">Gallery</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
</div>
<br/>Third Layout
<div class="container three">
    <div class="gallery">Gallery</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
</div>
<br/>

CSS：

html, body {
    width:100%:height:100%:
}
* {
    box-sizing:border-box;
    white-space:nowrap;
}
.container {
    width:500px;
    height:500px;
    position:relative;
}
.container div {
    border:1px solid black;
    padding:20px;
}
/*One*/
 .one.container .sidebar, .one.container .content {
    float:left;
    width:50%;
}
.one.container:after {
    clear:both;
    display:block;
    content:"";
}
/*Two*/
 .two.container .sidebar {
    float:right;
    width:50%;
}
.two.container .content {
    float:left;
    width:50%;
}
.two.container:after {
    clear:both;
    display:block;
    content:"";
}
/*Three*/
 .three.container>div {
    position:absolute;
}
.three.container .gallery {
    top:0;
    left:50%;
    right:0;
    height:50%;
}
.three.container .sidebar {
    top:0;
    left:0;
    bottom:0;
    width:50%;
}
.three.container .content {
    top:50%;
    left:50%;
    right:0;
    height:50%;
    bottom:0;
}

演示：http://jsfiddle.net/GCu2D/665/

这没有额外的div或标记。您只需切换container中的分类即可。