CSS布局问题

时间:2010-10-20 17:53:24

标签: css layout

如果我有两个3in div(a和b)和一个4in div(c)。在一个十英寸宽的外部div。我想要这个布局

1234567890 # ruler
---------- # header
aaaccccbbb # the divs in question

但如果外部div变为8英寸我想要这个布局

12345678
--------
aaa  bbb
  cccc

可以在没有JavaScript的情况下完成吗?我会做一个 - float:left b - float:right和c - margin:0 auto然后元素重叠......(X是重叠)

12345678
--------
aaXccXbb

5 个答案:

答案 0 :(得分:2)

这是您想要的解决方案。不需要javascript,只是overflow: hidden的魔力,它给出了中心div对流量的尊重:) 通过使输出屏幕更宽更小来查看效果!

CSS solution

答案 1 :(得分:1)

    <style type="text/css">
        #container { max-width: 580px; }
        #container div { border: 1px solid #000; font-size: 50px; font-family: monospace; }
        #ruler, #header { white-space: nowrap; overflow: hidden; }
        #aaa { float: left; }
        #bbb { float: right; }
    </style>
    <style type="text/css" media="all and (max-width: 599px)">
        #cccc { float: left; }
    </style>
    <style type="text/css" media="all and (max-width: 600px)">
        #aaa, #bbb { text-align: center; }
        #cccc { float: none; clear: both; width: auto; text-align: center; margin: 0 auto; }
    </style>

    <div id="container">
        <div id="ruler">1 2 3 4 5 6 7 8 9 0</div>
        <div id="header">- - - - - - - - - -</div>
        <div id="aaa" class="content">a a a&nbsp;</div>
        <div id="bbb" class="content">&nbsp;b b b</div>
        <div id="cccc" class="content">c c c c</div>
    </div>

媒体查询救援!

(在FF3.6中效果很好)

答案 2 :(得分:0)

var mydiv = document.getElementById("mydiv");
var curr_width = mydiv.style.width;

// Will likely need to do the pixel-inches conversion here.
if (curr_width >= 8in)
{
   mydiv.class = other_class
}

这是Javascript中的一般实现方法。

相关文章here

-Brian J. Stinar -

答案 3 :(得分:0)

首先,我不知道你如何测量div的宽度(以英寸为单位)。无论如何,解决方案是将div标记为“aaaa”浮动向左,标记为“bbbb”的div向右浮动,标记为“cccc”的div向左浮动,其余为0自动。不过,你的问题对我来说有点混乱,所以这里有一个你可以测试的基本标记和CSS。请注意我没有在浏览器中测试它,它可能没有给出预期的结果。不过,它应该给你一些指示:

<style>
    div#wrapper {
        width: 1000px;
    }
    div#wrapper .a, .c{
        width: 33%;
        height:50px;
        float: left;
        border: 1px solid #ccc;
        line-height: 50px;
        text-align: center;
    }
    div#wrapper .c {
        margin: 0 auto;
    }
    div#wrapper .b {
        float: right;
        width: 33%;
        height: 50px;
        border: 1px solid #ccc;
        line-height: 15px;
        text-align: center;
    }
</style>
<div id="wrapper">
    <div class="c">
        <p>cccccc</p>
    </div>
    <div class="a">
        <p>aaaaaa</p>
    </div>
    <div class="b">
        <p>bbbbbb</p>
    </div> 
</div>

此外,即使这个或其他解决方案有效,也不理想。如果你能提供更多细节,我相信那里有更好的选择。让div在页面上移动这样看起来更像是破碎的设计给我,很抱歉告诉你那个伙伴。

干杯!

答案 4 :(得分:0)

分别向左和向右浮动“a”和“b”div,并对它们两者施加4英寸宽度。然后将“c”div放在它们下面。