Question

Tricky找到最兼容浏览器的解决方案（包括IE6）。

三列，两侧两侧响应并随屏幕调整。

中间列应为空，但固定宽度：

enter image description here

很容易让它们全部响应：http://jsfiddle.net/Baumr/sZehH/2/（在这种情况下，中间的一个甚至不是一个列，而只是一个边距 - 这很好）。

<section> 
    <div>
        <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p>
    </div>
    <!-- Best if Column 2 is a margin or something -->
    <div>
        <p>Column 3, lorem blops dolor bla laa cats and dogs</p>                        
    </div>
<section>

我考虑使用position:，但它可能会变得混乱......

有什么想法吗？提前谢谢。

Answer 1

使用内部元素进行间距怎么样？可能是每列中的另一个DIV标记：

http://jsfiddle.net/sZehH/3/

HTML：

<section> 
    <div class="left">
        <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p>
    </div>

    <div class="right">
        <p>Column 3, lorem blops dolor bla laa cats and dogs</p>                        
    </div>
<section>

CSS：

section div {
    float: left;
    width: 50%;

}

section div p {
    background: pink;
    padding: 2.5%;    
}

.left p {
    margin-right: 20px;
}

.right p {
    margin-left: 20px;
}

我已经使用了已经存在的段落，但是你可能会有多个元素，所以你必须添加一个包装元素来解释它。

Answer 2

我认为最好的解决方案是盒子大小。虽然旧版浏览器在技术上不支持它，但确实有polyfills。

结帐the fiddle以下内容：

CSS（不包括供应商前缀）：

html, body {
    background: #000;
    height: 100%;
    width: 100%;
    color: #000;
}    

#columnOne, #columnTwo {
    width:50%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
}

#columnOne {
    float:left;
    border-right: 20px solid blue;
}

#columnTwo {
    float: right;
    border-left: 20px solid blue;
}

HTML：

<html>
    <body>        

        <div id="columnOne">HI!</div>
        <div id="columnTwo">HI!</div>

    </body>
</html>

更多信息here以及有关填充here的信息。

玩得开心！

Answer 3

鉴于您严格的浏览器支持要求，您可能需要使用非语义tables。这个table解决方案虽然您可能已经知道，但可以在this JSFiddle或更低版本上查看。哦，我还没有测试过，但据我所知，所有这些都应该与IE6兼容：

HTML：

<table> 
  <tr>
    <td class="column">
        <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p>
    </td>
    <td class="center-column"><div id='ie6-fix'></div></td>
    <td class="column">
        <p>Column 3, lorem blops dolor bla laa cats and dogs</p>                        
    </td>
  </tr>
<table>

CSS：

.column {
    background: pink;
}
.center-column {
    background-color: #eee;
    width: 100px;
    min-width: 100px;
}
#ie6-fix {
    width: 100px;
}

Answer 4

我建议你使用像YAML这样强大的css框架。

它允许您开发具有2或3列的柱状响应布局。因此，您可以专注于艺术和发展，而不是试图解决跨平台问题。

检查一下： http://www.yaml.de/demos/flexible-columns.html

简单的3柱流体布局，但中心柱空，有固定宽度？

4 个答案: