时间戳

首页 > 解决方案 > 如何制作带有填充和边距且内容无穷无尽的侧边栏？

css - 如何制作带有填充和边距且内容无穷无尽的侧边栏？

问题描述

我一直在尝试创建一个右侧栏，其填充为 12 像素，左侧边距为 10 像素，内容灵活，例如侧栏的高度会随着其中的文本而扩展，如果要增加的话。

问题是，我不能使用 flexbox、flow 或 display。

任何帮助将非常感激 ：）

这是小提琴https://jsfiddle.net/1azLec3d/

 side-bar {
  float: right;
  padding: 12px;
  width: 326px;
  margin-left: 10px;
  background: lightblue;

这基本上就是我想要实现的目标。

标签： css

解决方案

如果您不能使用 flexbox，我会使用传统float: left的填充和负边距技巧来将最短的列拉伸到与其兄弟相同的高度。请参阅下面的代码片段进行演示：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.head {
  background: teal;
  padding: 12px;
}

.sub-container {
  overflow: hidden;
}

.main-content,
.side-bar {
  float: left;
  width: 60%;
  padding: 12px;
  background: yellow;
  padding-bottom: 9999px;
  margin-bottom: -9987px; /* 12px less than padding-bottom since you want 12px padding bot */
}

.side-bar {
  width: 40%;
  background: pink;

}

.footer {
  background: green;
  padding: 12px;
}
<div class="main-container">

      <div class="head">
        <h1>Zombie ipsums</h1>
      </div>

      <div class="sub-container">
        <div class="main-content">

          <h2>Mindless</h2>
          <p>Whyt zomby Ut fames after death cerebro virus enim carnis grusome, viscera et organa viventium.
          </p>

        </div>

        <div class="side-bar">
          <h2>Lucio</h2>
          <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless
            creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus.
            Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
          </p>

        </div>
      </div>

      <div class="footer">
        <h2>Hi mindless mortuis soulless creaturas</h2>
      </div>

    </div>

推荐阅读