问不可能的html布局？
EN

Stack Overflow用户

提问于 2014-04-17 03:00:07

回答 3查看 183关注 0票数 0

我试图创建一个类似于下面所示的页面布局(CSS只支持Chrome，Firefox，IE8+)

注意:列1,2,3都可以动态增长(例如，从xhr附加标记等)，它们都应该是相同的高度(最大列的高度)。此外，细胞4也可以生长，虽然应该只是其内部内容的高度。

 _______________
|   |_____4_____|
|   |       |   |
| 1 |   2   | 3 |
|   |       |   |
|___|_______|___|

我在实现这个跨浏览器时遇到了麻烦。

我的尝试：我创建了一个简化的小提琴示例来展示我使用表(使用行跨度/ colspan)来获得所需布局的尝试。我想这本质上是一个多列css布局与一个扭曲..。

虽然表一般不应该用于布局。这似乎是跨浏览器实现预期结果的最不麻烦的方式。

我使用了js超时来调整其中一个列的高度(以模拟内容的动态附加)。

问题与我的尝试：

在Firefox (和IE9/ IE8)中，当第1列(红细胞)动态增长时，单元格'4‘(jsfiddle中的绿色单元格)将不尊重其设定的像素高度(高度变得更大)。查看Firefox中的小提琴以查看问题。为什么当细胞1的高度更新时，细胞4会增长？

这在Chrome中不是问题。

html

css

tablelayout

腾讯云域名特惠，新用户首年1元起

腾讯云域名专场特惠：个人新用户.cn仅8.8元/年，企业新用户.com仅1.06元/年...

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-04-22 00:27:45

使用在上面的注释中添加的这个文章中描述的技术，我创建了一个可行的跨浏览器(好的IE8+)解决方案，您可以找到- 这里。

标记非常简单，不需要任何表。

<div class="container">
    <div class="leftCol">left col
        <div class="leftColContent"></div>
    </div>
    <div class="header">header</div>
    <div class="centerCol">center col</div>
    <div class="rightCol">right col</div>
</div>

票数 0

Stack Overflow用户

发布于 2014-04-17 03:37:03

这样的事有帮助吗？

http://jsfiddle.net/cku7y/5/

<div class="wrapper">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="violet"></div>    
</div>

(查看jsfiddle css)它当然可以改进，但它是一个不使用表的开始。

票数 0

Stack Overflow用户

发布于 2014-04-17 04:18:10

我很确定你能这样做。

http://jsfiddle.net/V3ta3/2/

设置一个双容器，您不需要任何固定的值。

<div class="container">
<div class="wrapper">
    <div class="column1">
        <p>Column 1</p>
    </div>
    <div class="wrap-right-side">
        <div class="column4">
            <p>Column 4</p>
        </div>
        <div class="right-side">
            <div class="column2">
                <p>Column 2</p>
            </div>
            <div class="column3">
                <p>Column 4</p>
            </div>
        </div>
        <!-- end right side -->
    </div>
    <!-- end wrap right side -->
</div>
<!-- end wrapper -->
</div>
<!-- end container -->