侧栏周围的自适应主柱宽度

Question

我正在开发自定义样式表，因此我无法编辑HTML本身。这个想法很简单。我需要使主列或其内容在到达后者的末尾时在侧栏下动态排列。坦率地说，我已经准备好放弃这个，因为我认为这是不可能的。任何帮助，将不胜感激。感谢。

#content {
      width: 500px;
      height: 450px;
      display: block;
      background: rgba(0, 0, 0, 0.25);
      position: relative;
}
.thin {

      width: 100%;
}
.name {
      display: block;
      height: 40px;
      width: 100%;
      margin-top: 10px;
      background: rgba(0, 0, 0, 0.25);
}
.sidebar {
      display: block;
      float: right;
      margin-top:5px;
      width: 100px;
}
.box.a1 {
      width: 100%;
      height: 50px;
      display: block;
      margin-top:5px;
      background: rgba(0, 0, 0, 0.25);
}
.box.a2 {
      width: 100%;
      height: 50px;
      display: block;
      margin-top:5px;
      background: rgba(0, 0, 0, 0.25);
}
.box.a3 {
      width: 100%;
      height: 50px;
      display: block;
      margin-top:5px;
      background: rgba(0, 0, 0, 0.25);
}
.main_background {
      float: left;
}
.main {
      float: left;
      width: 375px;
}
.box.b1 {
    display: block;
    height: 85px;
    background: rgba(0, 0, 0, 0.25);
    margin-top: 10px;
}
.box.b2 {
    display: block;
    height: 85px;
    background: rgba(0, 0, 0, 0.25);
    margin-top: 10px;
}
.box.b3 {
    display: block;
    height: 85px;
    background: rgba(0, 0, 0, 0.25);
    margin-top: 10px;
}
.box.b4 {
    display: block;
    height: 85px;
    background: rgba(0, 0, 0, 0.25);
    margin-top: 10px;
}

jsfiddle代表当前的情况。 jsfiddle表示期望的结果。

Answer 1

如果必须使用仅限CSS ，则可以在main-div中使用::before伪元素并将其向右浮动（.main::before在我的例子如下）。

这样它就可以作为一个占位符＆＃34;为你的侧边栏。您需要position: absolute右侧的侧边栏，并将其直接放在placeholder-pseudo-element上方。别忘了给box.b班overflow: hidden;。

此解决方案仅在您知道侧边栏的大小时才有效。其他解决方案包括JavaScript。

这是我的例子（我将占位符紫色着色）：

＆＃13;

＆＃13;

#content {
      width: 500px;
      height: 450px;
      display: block;
      background: rgba(0, 0, 0, 0.25);
      position: relative;
}
.thin {
      position: relative;
      width: 100%;
}
.name {
      display: block;
      height: 40px;
      width: 100%;
      margin-top: 10px;
      background: rgba(0, 0, 0, 0.25);
      position: relative;
}
.sidebar {
      display: block;
      margin-top:5px;
      width: 100px;
      position: absolute;
      right: 0;
}
.box.a1 {
      width: 100%;
      height: 50px;
      display: block;
      margin-top:5px;
      background: rgba(0, 0, 0, 0.25);
}
.box.a2 {
      width: 100%;
      height: 50px;
      display: block;
      margin-top:5px;
      background: rgba(0, 0, 0, 0.25);
}
.box.a3 {
      width: 100%;
      height: 50px;
      display: block;
      margin-top:5px;
      background: rgba(0, 0, 0, 0.25);
}
.main_background {
      width: 100%;
}
.main {
}
.main::before {
  background-color: rgba(89, 39, 140, 0.4);
  content: "";
  display: inline-block;
  height: 165px;
  float: right;
  position: relative;
  margin-left: 10px;
  width: 100px;
  z-index: -1;
}
.box.b1 {
    display: block;
    height: 85px;
    background: rgba(0, 0, 0, 0.25);
    margin-top: 10px;
    overflow: hidden;
}
.box.b2 {
    display: block;
    height: 85px;
    background: rgba(0, 0, 0, 0.25);
    margin-top: 10px;
    overflow: hidden;
}
.box.b3 {
    display: block;
    height: 85px;
    background: rgba(0, 0, 0, 0.25);
    margin-top: 10px;
    overflow: hidden;
}
.box.b4 {
    display: block;
    height: 85px;
    background: rgba(0, 0, 0, 0.25);
    margin-top: 10px;
    overflow: hidden;
}

＆＃13;

<div id="content">
  <div class="thin">
    <div class="name"></div>
    <div class="sidebar">
        <div class="box a1"></div>
        <div class="box a2"></div>
        <div class="box a3"></div>
    </div>
    <div class="main_background">
        <div class="main">
					  <div class="box b1"></div>
					  <div class="box b2"></div>
					  <div class="box b3"></div>
					  <div class="box b4"></div>
        </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;