如果我有两个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
答案 0 :(得分:2)
这是您想要的解决方案。不需要javascript,只是overflow: hidden
的魔力,它给出了中心div对流量的尊重:)
通过使输出屏幕更宽更小来查看效果!
答案 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 </div>
<div id="bbb" class="content"> 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放在它们下面。