我可以在前一个元素旁边浮动一个元素吗？

Question

考虑以下沼泽标准段落 - 侧边栏布局。布局有两个问题：首先，侧边栏（在我的情况下将是导航的东西）将首先被浏览器看到，导致屏幕阅读器和纯文本浏览器的一些可访问性问题。所以元素应该在文章之后。但在那种情况下，我不能依赖于尝试过的＆amp;真float:right机制;所有绝对定位都会导致问题。第二个问题涉及第一个问题;对于狭窄的视口，我不希望它在文本旁边浮动，并希望它放在后面。

如何使用#main和#sidebar交换位置来实现相同的外观？

#main {
  width: 100%;
}
#sidebar {
  width: 150px;
  height: 200px;
  background-color: #abc;
  float: right;
}

<div id="sidebar"></div>
<div id="main">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>

Answer 1

如果您可以使用FlexBox，则可以使用.wrapper { display: flex; } #main { width: 85%; } #sidebar { width: 150px; background-color: #abc; order: 1; }左右交换。

我已经为你完成了：

＆＃13;

＆＃13;

<div class="wrapper">
  <div id="main">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
      here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
      Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  </div>
  <div id="sidebar"></div>
</div>

＆＃13;

componentWillMount()

＆＃13;

＆＃13;

＆＃13;

预览

Answer 2

我以前做浮动布局的方法是向左浮动第一个项目，然后向右浮动第二个项目。这意味着您可以将#main元素放在标记的第一位。之后，您应该为#main元素指定任意百分比宽度。请记住，因为#sidebar具有固定宽度，所以一旦#sidebar不再适合并且碰到下一行，您将不得不使用媒体查询来修复其布局。这取决于你如何将它放在那里，但出于争论的目的，你可以尝试简单地移除那个浮点数。我假设你不必担心这两个上面或下面没有其他元素。对于媒体查询，我使用408px作为最大宽度，但在您的网页上可能会有所不同。

#main {
  width: 60%;
  float:left;
}
#sidebar {
  width: 150px;
  height: 200px;
  background-color: #abc;
  float:right;
}

#main p {margin-top:0;}

@media screen and (max-width:408px) {
  #main {
    float:none;
  }
  
  #sidebar {
    float:none;
  }
}

<div id="main">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div id="sidebar"></div>

Answer 3

我建议先伪装一个带有伪元素的浮点元素，并使用绝对位置将侧边栏放在它上面。

＆＃13;

＆＃13;

#main {
  width: 100%;
}
#main:before {
 content:'';
 float:right;
 background:red;
 width:150px;
 height:200px;
}
#sidebar {
  width: 150px;
  height: 200px;
  background-color: #abc;
  position:absolute;
  top: 16px;
  right: 8px;
}

＆＃13;

<div id="main">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div id="sidebar"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用表格布局的另一个想法：

body {
  display: table;
}

.container {
  display: table-row;
}

#main {
  display: table-cell;
}

#sidebar {
  width: 150px;
  min-height: 200px;
  background-color: #abc;
  display: table-cell;
}

<div class="container">
  <div id="main">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
      here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
      Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  </div>
  <div id="sidebar"></div>
</div>