Question

我想创建一个像http://vandelaydesign.com/blog/blog-promotion/best-twitter-practices-for-improving-visibility/这样的HTML布局，其中最左侧的列仅显示在较高的屏幕尺寸上，而最右侧的列的固定宽度为345px。

使用bootstrap 3，我尝试了以下内容。

<div class="container">
    <div class="row">  
        <!--left-->
        <div class="col-sm-3">  
        </div>
        <!--/left-->

        <!--center-->
        <div class="col-sm-6">
        </div>
        <!--/center-->

        <!--right-->
        <div class="col-sm-3">
        </div>
        <!--/right-->
    </div>
</div>
<!-- /.container -->

但它正在创建堆叠列。任何帮助都会很棒。

Answer 1

在我们获得广泛的CSS flexbox支持之前，我喜欢display：table-cell用于流畅的水平布局。请看一下这个快速示例：http://jsfiddle.net/zn6z3/您可以使用媒体查询以某个宽度隐藏左列，而中间列只会展开以填充丢失的空间。

关于table-cell的好处是你可以在某些列上定义固定宽度，而在其他列上没有明确的宽度。未定义宽度的列将展开以填充表格的空间。与基于浮动的布局相比，这是一个巨大的优势。

这是我的示例HTML＆amp; CSS

<div id="page">
    <div class="col" id="left">Content</div>
    <div class="col" id="middle">Content</div>
    <div class="col" id="right">Content</div>
</div>


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#page {
    display: table;
    width: 100%;
}
    #page .col {
        display: table-cell;
        vertical-align: top;
        padding: 20px;
    }
    #left {
        width: 150px;
        background: #777
    }
    #middle {
        width: auto;
        background: #aaa;
    }
    #right {
        width: 345px;
        background: #ccc;
    }

如何创建3列响应式设计，第1列为可选，第3列为最小宽度？

1 个答案: