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%并从float容器中删除了divMenuCenterContainer。

请检查结果here。

然后看看fiddle。

由于

Html中的Div表 - 包括明确的浮动问题

1 个答案: