Css 一个旁边有两个浮动div，浮动与边距

我想创建此布局

：

------------------ -------
|   div header   | | div |
|________________| |     |
_________________  |  p  |
|                | |  a  |
|                | |  n  |
|  div content   | |  e  |
|                | |  l  |
|________________| |_____|

它被放置在容器div中，但问题是panel div和content div的对齐方式相同。 这是我的代码：

<div id="container" style="width: 1184px; min-height: 1504px; border: thin dashed; margin: 0px auto;">
  <div id="header" style=" border: thin solid; float: left; margin-bottom: 20px; width: 930px; height: 150px;">
  </div>
  <div id="content" style="border: thin solid; float: left; width: 930px; min-height: 1330px;">
  </div>
  <div id="panel" style="border: thin solid; float: right; min-height: inherit; width: 230px; margin-left: 20px; height: inherit">
  </div>
</div>

我尝试在那里搜索答案，但没有成功。我尝试了float、clear和display参数的组合，但没有结果。只有当我交换div的顺序并在content div之前获得panel div时，我才能获得最终布局，但这一更改使我无法在panel div中使用inherit height。我需要根据容器的面板div height（容器div height由content div和带边距的header div自动确定）。 接下来，只有当我设置float参数但margin参数不可用时，容器高度才是自动的。

---

有人能帮我解决这些问题吗

只需重新排序div，使面板位于内容之前：

<div id="container" style="width: 1184px; min-height: 1504px; border: thin dashed; margin: 0px auto;">
    <div id="header" style=" border: thin solid; float: left; margin-bottom: 20px; width: 930px; height: 150px;"></div>
    <div id="panel" style="border: thin solid; float: right; min-height: inherit; width: 230px; margin-left: 20px; height: inherit"></div>
    <div id="content" style="border: thin solid; float: left; width: 930px; min-height: 1330px;"></div>
</div>

---

您可以尝试将两个左div包装到它们自己的div中：

<div id="container" style="width: 1184px; min-height: 1504px; border: thin dashed; margin: 0px auto;">
  <div id="wrapper" style="float: left; width: 930px;">
      <div id="header" style="border: thin solid; margin-bottom: 20px; width: 930px; height: 150px;"></div>
      <div id="content" style="border: thin solid; min-height: 1330px;"></div>
  </div>
  <div id="panel" style="border: thin solid; float: right; min-height: inherit; width: 230px; margin-left: 20px; height: inherit"></div>
</div>

我还建议使用

display:inline块而不是
浮动
。行为略有不同，但如果我理解正确，这将解决容器分区的自动高度问题。
试试这个

诀窍在于使用

display:table 

及

使用此解决方案，无论#内容中的内容如何，侧边栏都将具有正确的高度


废话！废话！！
废话！废话！！

您可以首先在页面内进行垂直分割，正如我的JSFIDLE示例中所显示的那样，一旦您对不同的垂直分割有了更清晰的理解，那么您就可以在这些垂直分割中放置其他分割，这样它就更具体，而且不太可能中断

顺便说一句，不要把所有的css都写成内联的，只写那些非常琐碎或非常重要的内容，而不使用臭名昭著的“重要！”标签。我尝试显示表格和表格单元格参数，但显然不正确。编辑：你能再帮我一件小事情吗？当我尝试将面板内容放入面板div时，内容不是来自上边框，而是像元素一样显示，在面板div中应用了margin top参数或padding top。它也显示在链接中。应用于面板div或内部元素的显示参数无法解决此问题。没问题！！还可以了解Flexbox display，它不是所有浏览器都支持的，但很快就会支持！！
display: table-cell

<div class="container">
    <div class="leftside">
        <div class="innertop">
        Blah! Blah!!
        </div>
        <div class="innermid">
        Blah! Blah!!
        </div>
    </div>
    <div class="rightvertical">
    </div>
</div>