Question

我问过并回答了这个问题，这里有一个带有悬垂和浮动徽标的三栏布局：

答案结果证明是有问题的，因为CSS＆＃34; calc＆＃34;功能是如此不受支持，特别是在移动设备上，导致三个列在较小的设备上堆积到左侧。那么在不使用calc的情况下解决这个三列布局问题的方法可能是什么？

HTML：

<body>
    <div class="container">
        <div class="topcontain cf">
            <div class="topleft">testing left</div>
            <div class="topcenter"><img class="" src="http://s3.postimg.org/4smfaxjtb/toutdemo.png"></div>
            <div class="topright">testing right</div>
        </div>
        <div class="bodypart">
            <div class="logo"><img src="http://s3.postimg.org/o974xgexb/demologo.png"></div>
            <div class="bodycopy">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, voluptas, nobis consequatur natus odit incidunt doloribus ipsa cum commodi dolor nostrum id saepe illo harum provident explicabo pariatur autem. Quam.</p>
                ETC...
            </div>
        </div>
    </div>
</body>

......和css：

.container {
        text-align: center;
    }
    .topcontain {
        width:80%
        text-align:center;
        /*overflow: hidden;*/
        border:1px solid #f00;
        height:75px;
    position:relative;
    }
.topcontain > div {     -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
    .topleft {
        /*margin:auto;*/
        width:35%;
          width: calc(50% - 128px); /*not working on mobile, safari*/

        float:left;
        border:1px solid #00f;
    }
    .topcenter {
        width:256px;
        float:left;
        border:1px solid #0f0;
    }
    .topright {
        float:right;
        width:35%;
        width: calc(50% - 128px); /*not working on mobile, safari*/

        border:1px solid #ff0;
    }

    .bodycopy {
        text-align:left;
    }
.logo { clear: left; }

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

在这里小提琴：http://jsfiddle.net/Znz2P/10/

Answer 1

我的建议，因为我多次遇到同样的问题，就是围绕媒体查询重构你的CSS。另外，我建议不使用＆＃34;标准＆＃34;媒体查询，因为这些长期负面影响可移植性。相反，首先以您计划设计的最大显示尺寸预览页面，然后缩小窗口的宽度，直到它“＃34;中断＆＃34;你创造的美学。这是第一个媒体查询的位置，您可以创建＆＃34; custom＆＃34;此处用于显示侧列div的规则。

注意：如果您使用em作为度量单位，此方法效果最佳。

希望这有帮助。

Answer 2

您可以使用display：table / table-cell。

所以，对于包装器，你设置display：table; 对于3个div，设置display：table-cell; 对于中间div，您设置宽度：256px;

作为桌子单元格，其他2个div将具有相等的宽度 - ＆gt; （包装宽度 - 256）/ 2

.topcontain { display: table; }
.topcontain > div { display: table-cell; }
.topcenter { width: 256px; }

http://jsfiddle.net/Znz2P/14/

没有Calc的三个浮动列

2 个答案: