Div Html 中的表格 - 包括清除浮动问题

Question

我一直在修补 html 中的 'clear-floats' 问题。创建基于 div 的表格基本上需要它。（好书，大家一定要看看：http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/）。

我这样做是因为我最终会在 css.

中整合一些“@media”内容

我的基本想法是我有一个中央条带 (divMenuCenterContainer)，其中有两列 (divMenuMiddleElement)。最终，divMenuMiddleElement 将一个堆叠在另一个之上，以适应低@media 屏幕宽度。问题是我还没有走到那一步。我无法使基本设计正常工作。

我想要的是 divMenuCenterContainer 居中在屏幕中间。其中有两列，在这个阶段将并排相邻。

错误：左边的浮动 (divMenuBlankLeftRight) 什么也没有时根本不出现（这是我想要的）。当我将字母 'A' 放入其中时，它只出现在两个主要列上方的单独一行（而不是在左侧）。

我想要什么：我希望 divMenuBlankLeftRight 显示在左侧，但什么也没有。或者我希望 divMenuCenterContainer 正确居中而不需要 divMenuBlankLeftRight.

或者：有更好的方法吗？我应该使用第 nth-child，如果是的话，考虑到我需要在中间居中的两列（并最终堆叠在一起以进行低宽度 @media 检查），我该如何工作？

这就是我的。

CSS:

<style type="text/css" media="all">
* {
  box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1; /* For IE 6/7 */
}
.divMenuContainer1
{
    border: solid 1px black;
    background: #0000FF;
}
.divMenuBlankLeftRight
{
    float: left;
    width: 19%;
    background: #FF0000;
}
.divMenuCenterContainer
{
    float: left;
    width: 60%;
    background: #00FF00;
    text-align: center;
    border: solid 1px black;
}
.divMenuMiddleElement
{
    float: left;
    width: 50%;
    background: #00FF00;
}
</style>

HTML:

<div class="divMenuContainer1 clearfix">
    <!--<div style="width: 100%">-->
        <div class="divMenuBlankLeftRight">A</div>
        <div class="divMenuCenterContainer clearfix">
            <div class="divMenuMiddleElement">
                <p>Left Hand Central Column</p>
            </div>
            <div class="divMenuMiddleElement">
                <p>Right Hand Central Column</p>
            </div>
        </div>
        <div class="divMenuBlankLeftRight"></div>
    <!--</div>-->
    <!--<div style="width: 100%">-->
        <div class="divMenuBlankLeftRight">A</div>
        <div class="divMenuCenterContainer clearfix">
            <div class="divMenuMiddleElement">
                <p>Left Hand Central Column 2</p>
            </div>
            <div class="divMenuMiddleElement">
                <p>Right Hand Central Column 2</p>
            </div>
        </div>
        <div class="divMenuBlankLeftRight"></div>
    <!--</div>-->
</div>

Answer 1

这是 我想要的 的代码，我添加了 margin:19% 并从您的 divMenuCenterContainer 容器中删除了 float。

请检查结果here。

然后看看 fiddle。

谢谢

Div Html 中的表格 - 包括清除浮动问题

Div Tables in Html - including the clear floats issue

html

css-float

css-tables