我试图在桌面上实现响应式布局:
在移动设备上这样:
请注意以下要求:
这是一个包含我的初始HTML和CSS的jsfiddle:
https://jsfiddle.net/sergkr/np6k2tj3/
和一个片段:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4;
color: #333;
background-color: #fff
}
section {
margin: 1.6em 0;
}
section>h2 {
margin: 0;
padding: 12px 24px;
font-size: 16px;
background: #eceeee;
text-transform: uppercase;
}
section>p {
margin: 0;
padding: 12px 24px;
background: #fafafa;
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex-basis: 100%;
}
.sidebar {
padding: 0 2em;
background: #fbf6f4;
}
@media screen and (min-width: 1024px) {
.container {
flex-wrap: nowrap;
}
main {
flex: 1 1 70%;
}
.sidebar {
flex: 0 0 30%;
margin-left: 2em;
}
}

<div class="container">
<main>
<h1>Main</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
</p>
</section>
</main>
<div class="sidebar">
<h1>Sidebar</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
</p>
</section>
</div>
</div>
&#13;
请注意,侧边栏下方有浪费的空间。我希望主要内容在侧边栏结束后环绕并占据整个宽度,但我不确定如何实现。
我考虑在侧边栏上使用float: right
并将其放在<main>
之前,但这会导致侧边栏首先出现在移动设备上(我希望它出现在内容之后)。
有没有办法在给定上述要求的情况下实现所需的布局,使用flexbox,float或其他技术?
答案 0 :(得分:5)
您可以使用display
切换order
和float
。要使用float
,您需要aside
在HTML中排在第一位,因此内容可以包含在内。 flex
和order
会在移动设备上将其发回底部。
Example或片段,以便从flex布局切换到浮动布局
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4rem;
color: #ddd;
background-color: #333
}
section {
color:#333;
margin: 1.6em 0;
}
section > h2 {
margin: 0;
padding: 12px 24px;
font-size: 16px;
background: #ace;
text-transform: uppercase;
}
section > p {
margin: 0;
padding: 12px 24px;
background: #fafafa;
}
.container {
overflow:hidden;
}
main {
display:flex;
flex-direction:column;
}
.sidebar {
padding: 0 2em;
background: tomato;
order:2;
}
@media screen and (min-width: 1024px) {
.container {
}
main {
display:block;
}
main h1 {
float:left;
width:70%;
}
main section {
clear:left;
overflow:hidden;
}
.sidebar {
width:25%;
float:right;
margin-left:2em;
}
}
&#13;
<div class="container">
<main>
<h1>Main</h1>
<aside class="sidebar">
<h1>Sidebar</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
</p>
</section>
</aside>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
</p>
</section>
</main>
</div>
&#13;
答案 1 :(得分:3)
更新
感谢G-Cyr,他让我朝另一个方向发展,实际上有一个Flexbox / Float组合,制作了section
flex列容器,它们似乎尊重浮动元素并环绕它。
只需将display: flex; flex-direction: column;
添加到section
规则......它甚至可以与IE11一起使用:)
Stack snippet
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4;
color: #333;
background-color: #fff
}
section {
display: flex; /* added */
flex-direction: column; /* added */
margin: 1.6em 0;
}
section > h2 {
margin: 0;
padding: 12px 24px;
font-size: 16px;
background: #eceeee;
text-transform: uppercase;
}
section > p {
margin: 0;
padding: 12px 24px;
background: #fafafa;
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex-basis: 100%;
}
.sidebar {
order: 1;
padding: 0 2em;
background: #fbf6f4;
}
@media screen and (min-width: 1024px) {
.container {
display: block;
}
.sidebar {
float: right;
width: 30%;
margin: 0 2em;
}
}
&#13;
<div class="container">
<div class="sidebar">
<h1>Sidebar</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
</p>
</section>
</div>
<main>
<h1>Main</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
</p>
</section>
</main>
</div>
&#13;
通过将h2
和p
放在他们自己的section
中,p
本身也将包围浮动元素
Stack snippet 2
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4;
color: #333;
background-color: #fff
}
section {
display: flex; /* added */
flex-direction: column; /* added */
}
section:nth-child(2n+2) { /* added */
margin-top: 1.6em;
}
section > h2 {
margin: 0;
padding: 12px 24px;
font-size: 16px;
background: #eceeee;
text-transform: uppercase;
}
section > p {
margin: 0;
padding: 12px 24px;
background: #fafafa;
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex-basis: 100%;
}
.sidebar {
order: 1;
padding: 0 2em;
background: #fbf6f4;
}
@media screen and (min-width: 1024px) {
.container {
display: block;
}
.sidebar {
float: right;
width: 30%;
margin: 0 2em;
}
}
&#13;
<div class="container">
<div class="sidebar">
<h1>Sidebar</h1>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum.
</p>
</section>
</div>
<main>
<h1>Main</h1>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
</p>
</section>
</main>
</div>
&#13;
简短回答是&#34;不,使用Flexbox&#34;不可能。
inline
元素虽然,它们将环绕浮动元素。
使用 inline
元素,我们可以完成类似的事情, it 但是有一些缺点,其中困难的部分是让背景颜色填充可用空间,所以这里看起来就像是没有o /。
参见CSS中的注释
Stack snippet
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4;
color: #333;
background-color: #fff
}
section {
display: inline; /* changed display type */
/*margin: 1.6em 0;*/ /* have no effect on inline element */
}
section > h2 {
display: inline; /* changed display type */
/*margin: 0;*/ /* have no effect on inline element */
padding: 12px 24px;
font-size: 16px;
background: #eceeee;
text-transform: uppercase;
}
section > p {
display: inline; /* changed display type */
/*margin: 0;*/ /* have no effect on inline element */
/*padding: 12px 24px;*/ /* won't work properly on
multiline inline element */
/*background: #fafafa;*/ /* removed as it does not look good */
}
section > p::before,
section > p::after {
content:"\A\A"; /* create 2 line break's */
white-space: pre; /* or pre-wrap */
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex-basis: 100%;
}
.sidebar {
order: 1;
padding: 0 2em;
background: #fbf6f4;
}
@media screen and (min-width: 1024px) {
.container {
display: block;
}
.sidebar {
float: right;
width: 30%;
margin: 0 2em;
}
}
&#13;
<div class="container">
<div class="sidebar">
<h1>Sidebar</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
</p>
</section>
</div>
<main>
<h1>Main</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
</p>
</section>
</main>
</div>
&#13;