如何制作没有边缘顶部黑客的侧板？

Question

制作侧面板时，float和display: inline-block的概念很难理解。

在一个完美的世界里，我希望我的蓝图是我网站的设计：

我实现了设计;但是当我尝试添加新东西的时候注意到，我一直在帮助我的可怕黑客攻击更多的CSS黑客造成混乱（使用大量的边缘 - 左，右，顶部和底部） - 最后它浪费了我的开发时间，因为一些黑客在所有浏览器上都不起作用。

无论如何，试图避免利润率上限/下限黑客，这是我尝试制作侧板：

https://jsfiddle.net/p367aL8w/1/

我在这个例子中的思考过程是给每个面板一个display inline-block;属性，同时将它们一直推到右边，这样他们就可以走到一边。这不行。这样做的正确方法是什么？ （我真的不想使用弹性盒）。

Answer 1

我非常喜欢基于flex的设计的简单性，并且不惜一切代价避免使用float，除了简单的元素内联流动，例如在图像周围放置文本。

请参阅下面的flex解决方案。 CSS grids也提供了一个很好的解决方案。

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  flex-direction: row;
}

.wrapper .main-panel {
  flex: 1 1 auto; /* shorthand for flex-grow flex-shrink flex-basis */
  width: 100%;
  height: 300px;
  border: 2px solid red;
}

.wrapper .side-panel {
  flex: 0 0 auto;
  width: 200px;
  display: flex;
  flex-direction: column;
}

.wrapper .side-panel > div {
  flex: 0 0 auto;
  width: 100%;
  height: 100px;
  border: 2px solid red;  
}

＆＃13;

<div class="wrapper">
  <div class="main-panel">Main panel</div>
  <div class="side-panel">
    <div class="side-panel-item">Panel 1</div>
    <div class="side-panel-item">Panel 2</div>
    <div class="side-panel-item">Panel 3</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我更喜欢DOM中的一个简单修改，它可以修复任何浏览器特定的css hacks的所有问题。只需为三个侧面板小部件添加一个容器，并将该容器对齐。请参阅下面的示例

#mainpanel{
  height: 500px;
  width: 65%;
  background-color: #aaa;
  float: left;
}

#sidepanel{
  width: 30%;
  background-color: white;
  float: right;
}

.sidepanel01, .sidepanel02, .sidepanel03{
  width:100%;
  height:100px;
  float:left;
  background: #aaa;
  margin-bottom: 20px
}

<div id="mainpanel">
Main panel
</div>
<div id="sidepanel">
   <div class="sidepanel01">
     Panel1
   </div>

   <div class="sidepanel02">
     Panel2
   </div>

   <div class="sidepanel03">
    Panel3
  </div>
</div>