代码之家 › 专栏 › 技术社区 › mike3996

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

responsive-design css html

mike3996 · 技术社区 · 6 年前

考虑以下带有侧栏布局的bog标准段落。布局有两个问题:首先,浏览器首先会看到侧栏(在我的情况下是导航工具),这导致屏幕阅读器和纯文本浏览器存在一些可访问性问题。所以元素应该在文章后面。但在这种情况下,我不能依靠久经考验的;符合事实的 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>

3 回复 | 直到 6 年前

Praveen Kumar Purushothaman Daniel Dewhurst 6 年前

如果可以使用FlexBox,则可以使用 order 左右交换。

我为你做了:

.wrapper {
  display: flex;
}

#main {
  width: 85%;
}

#sidebar {
  width: 150px;
  background-color: #abc;
  order: 1;
}

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

预览

OzzyTheGiant 6 年前

我使用的浮动布局方法是将第一项向左浮动,然后将第二项向右浮动。这意味着您可以将#main元素放在标记的第一位。之后,应该为#main元素指定任意的宽度百分比。请记住,由于#侧边栏的宽度固定,因此一旦#侧边栏不再适合并跳转到下一行,就必须使用媒体查询来修复其布局。这取决于您希望如何在那里进行布局,但出于论证目的,您可以尝试在该点上简单地删除浮点数。我假设在这两个元素之上或之下没有其他元素是你必须担心的。对于媒体查询,我使用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>

Renzo Calla 6 年前

我建议在前面用pseudo元素伪造一个float元素,并使用position absolute将边栏放在上面。

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

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