Question

我有HTML标记，包含三个div：

<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属性解决问题的不完整尝试。

＆＃13;
＆＃13;
/* 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%; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

如果您包含.middle.layout-2等div，请检查this demo。

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 2

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

如果要切换侧边栏的侧面，只需交换左侧和右侧。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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中的classe。

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

3 个答案: