Question

我花了最后几个小时研究我能想到的每种布局方法才能让它发挥作用。我正在使用的代码如下：

<!-- Begin Wrap -->
<div id="wrap">

    <!-- Begin contentWrap -->
    <div id="contentWrap">

    <!-- Begin statementDiv -->
    <div id="statementDiv" class="transparent blackText">

        <p>
        ART<br>
        CULTURE<br>
        F<span class="miniMargin">A</span>SHION<br>
        THEBLACK<br>
        COLLARWORKER<br>
        </p>

    </div>
    <!-- End statementDiv -->

<!-- Begin miniWrap -->
<div id="miniWrap">

    <!-- Begin socialDiv -->
    <div id="socialDiv" class="transparent marginRight">
    </div>
    <!-- End socialDiv -->

    <!-- Begin navButtons -->
    <div id="navButtons" class="floatLeft">
            <img src="images/buttons/gallery.png" class="marginRight">
            <img src="images/buttons/blog.png">

        </div>
        <!-- End navButtons -->

    </div>
    <!-- End miniWrap -->

    <!-- Begin fillDiv -->
    <div class="fillDiv transparent blackBG"></div>
    <!-- End fillDiv -->

    </div>
    <!-- End contentWrap -->

    <!-- Begin Footer -->
    <div id="footer">

    </div>
    <!-- End Footer -->

</div>
<!-- End Wrap -->

，CSS是：

#wrap {height: 100%; width:100%; display: table;}
#miniWrap {height: 41px; width: 362px; float: left; display: table-cell;}
#navButtons {position: relative;height: 41px;float: left;}
#contentWrap {position: absolute;   bottom: 0;  float: left;    display: table-row;}
#socialDiv {height: 41px;float: left;}
#statementDiv {width: 365px; font-size: 42px; font-family: Arial Black, Gadget, sans-serif; line-height: .8; letter-spacing: -3px; display: table-cell;}
.fillDiv {width: 100%;height: 41px;display: table-cell;} 
.miniMargin {margin: 0 -3px;}
.marginRight {margin-right: 3px;}
.floatLeft {float: left;}
.blackText {color: #0d0601;}
.blackBG {background: #0d0601;}

我经常来回改变布局我无意中破坏了设计。任何提示或建议将不胜感激。

我希望完成的是将statementDiv，miniWrap和fillDiv放在同一水平线上。左边的两个div有一个静态大小。我希望第三个div（fillDiv）自动扩展以填充剩余的所需百分比。

自动使div变为0宽，100％导致该行下降到其他div下。

Answer 1

我认为你正在寻找的是http://jsfiddle.net/gWPXF/

Answer 2

我的主张：http://jsfiddle.net/7XPGa/

Answer 3

很难确定这种方法是否适用于您而不知道您的照片是什么以及所需的最终结果是什么，但是......

通过添加.blackBG类并将其宽度设置为100％，为#contentWrap添加黑色背景，然后将#statementDiv和#miniWrap设为白色背景。

因此，主要是为容器提供您希望在.fillDiv中查看的背景颜色，然后在容器内的＆lt; div＆gt;中覆盖它。然后你可以摆脱.fillDiv，因为它似乎只是用颜色填充空间。

让div正确扩展

3 个答案: