Thay đổi bố cục của các yếu tố sử dụng CSS mà không thay đổi HTML

Question

Tôi có đánh dấu HTML bao gồm ba divs:

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

tôi muốn trình bày nó trong hai bố trí khác nhau sử dụng CSS (sẽ đẹp hơn nếu tôi có thể kiểm soát xem thanh bên xuất hiện ở bên trái hoặc bên phải):

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

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

Trên thực tế, sẽ đẹp hơn nếu tôi có thể kiểm soát xem thanh bên xuất hiện bên trái hay phải.

Tôi có thể thêm các div bổ sung và/hoặc thay đổi thứ tự nguồn divs miễn là nội dung xuất hiện trước thanh bên. Nhưng HTML không thể thay đổi trên cơ sở từng bố cục.

Đây là nỗ lực không đầy đủ của tôi để giải quyết vấn đề bằng cách sử dụng tài sản đặt hàng flexbox +.

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

Thông thường tôi tránh nổi như bệnh dịch hạch, nhưng đối với trường hợp này, họ làm những gì bạn cần.

Nếu bạn muốn chuyển sang cạnh bên, hãy trao đổi các quyền và quyền.

Điều này sẽ giữ bố trí của bạn với nội dung kích thước động:

.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

Hãy cho tôi biết nếu điều này là những gì bạn muốn:

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

D emo: http://jsfiddle.net/GCu2D/665/

Điều này không có thêm div hoặc đánh dấu. Bạn cần phải chỉ cần chuyển đổi các classe trong container.

Answer 3

Kiểm tra this demo nếu bạn có chứa div như .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%;}