1

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

三列，侧边两列响应式，随屏调整。

中间列应该是空的，但宽度固定：

在此处输入图像描述

让它们全部响应很容易：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:，但它可能会变得混乱......

有任何想法吗？提前致谢。

4

4 回答 4

2

使用内部元素进行间距怎么样？可能是每列内的另一个 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;
}

我已经使用了已经存在的段落，但是您可能会有多个元素，因此您必须添加一个包装元素来解决这个问题。​</p>

于 2012-10-28T03:46:48.867 回答
1

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

查看小提琴到以下内容：

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和关于polyfills的信息here。

玩得开心！

于 2012-10-28T03:57:09.980 回答
1

鉴于您严格的浏览器支持要求，您可能需要使用 non-semantic tables。尽管您可能已经知道此table解决方案，但可以在此 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;
}
于 2012-10-28T07:39:00.780 回答
0

我建议你使用像 YAML 这样健壮的 css 框架。

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

看看这个： http ://www.yaml.de/demos/flexible-columns.html

于 2012-10-28T03:42:36.080 回答