Question

我想创建此布局:

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

它放在容器div中。但问题是面板div与内容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>

我尝试在那里搜索答案，但没有成功。我尝试浮动，清除和显示参数的组合，但没有结果。我只有在交换div的顺序并在内容div之前得到面板div时才得到最终布局但是这个改变不可能在面板div中使用继承高度。我需要根据容器的面板div高度（容器div高度由内容div和带有边距的标题div自动）。接下来，只有当我设置float参数但margin param变得不可操作时，容器高度才是自动的。有人可以帮我解决这些问题吗？

Answer 1

只需重新排序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>

<强> jsFiddle example

Answer 2

您可以尝试将两个左侧的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-block;代替float。行为略有不同，但是，如果我理解正确，这将解决您使用容器div的自动高度所遇到的问题。

Answer 3

试试这个code

诀窍是使用

display:table

和

display: table-cell

使用此解决方案无关紧要#content侧边栏中的内容将具有正确的高度

Answer 4

JSFiddle!

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

你可以先在我的JSfiddle示例中看到你想要的页面中的垂直分区，一旦你对不同的垂直分区有了更清楚的理解，那么你可以在其中放置其他分区，这样就更具体了，并且不太可能破坏。

在旁注中，尽量不要编写内联的每个css，只考虑那些真正微不足道或非常重要的内容，而不使用臭名昭着的“重要”！标签

两个浮动div除了一个，浮动对边缘

4 个答案: