Могу ли я поместить элемент рядом с предыдущим элементом?

Question

Рассмотрим следующую стандартную схему абзацев с боковой панелью.Макет имеет две проблемы: во-первых, боковая панель (которая в моем случае будет навигационной системой) будет сначала видна браузеру, что приведет к некоторым проблемам с доступностью для программ чтения с экрана и текстовых браузеров.Так что элемент должен быть после статьи.Но в этом случае я не могу положиться на проверенный и действительный 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

Еще одна идея с использованием макета таблицы:

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>

Answer 2

Я предложу имитировать элемент float с псевдоэлементом и использовать абсолютное положение, чтобы поместить боковую панель поверх него.

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

Answer 3

То, как я делал макет с плавающей точкой, заключалось в том, чтобы плавать слева от первого элемента, а затем перемещать вправо второй элемент подряд.Это означает, что ваш элемент #main может быть первым в разметке.После этого вы должны дать вашему элементу #main произвольный процент ширины.Имейте в виду, что, поскольку #sidebar имеет фиксированную ширину, вам придется использовать медиазапрос, чтобы исправить его компоновку, как только #sidebar больше не помещается и поднимается до следующей строки.Это зависит от вас, как вы хотите выложить это, но в целях аргументации вы можете попытаться просто удалить поплавки в этой точке.Я предполагаю, что нет никаких других элементов выше или ниже этих двух, о которых вам придется беспокоиться.Для медиазапроса я использовал 408 пикселей для максимальной ширины, но это может отличаться на вашей веб-странице.

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

Если вы можете использовать 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>

Предварительный просмотр