我可以防止浮动div在调整大小时包裹吗？
Z J*_*nes 3 html css jquery jquery-ui
我的布局是一个流畅的(页面宽度的98%)包含框.我有多行占据此容器宽度的100%并具有固定高度.
我需要在每一行中使用3个div(绿色,红色,蓝色) - 但红色div会被隐藏,直到切换为止,此时它会滑出.目前,当红色div滑出时,根据蓝色div中"主文本"的数量,蓝色div将包裹在该行下方.
我的目标
尝试1
$('#a').click(function() {
$('#tC').animate({width: 'toggle'});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#container { min-width: 900px; width: 98%; margin: 0 2%; float: left; border: 1px solid #000; height: 145px; overflow: hidden;}
#a, #b, #tC { padding: 20px; font-size: 30px; height: 145px }
#a { background: #0C0; width: 100px; float: left; }
#tC { background: #C00; width: 400px; float: left; margin-right: 20px; }
#b { background: #00C; height: 145px; float: left; position: relative }
#bottom { position: absolute; bottom: 44px; font-size: 13px }
</style>
</head>
<body>
<div id="container">
<div id="a"><a id="click" href="#">A</a></div>
<div id="tC">TC</div>
<div id="b">
<div id="title">BBBB BBBB BBBBB BBBBB BBBBBBBBBBB BBBBBBBBBB BBBBBBBBBBBBBB</div>
<div id="bottom">words at the bottom of blue div!</div>
</div>
</div>
</body>
</html>单击A以切换红色div - 这可能不适用于较低分辨率.
尝试2
$('#a').click(function() {
$('#tC').animate({width: 'toggle'});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#container { min-width: 900px; width: 98%; margin: 0 2%; float: left; border: 1px solid #000; height: 145px; overflow: hidden;}
#a, #b, #tC { padding: 20px; font-size: 30px; height: 145px }
#a { background: #0C0; width: 100px; float: left; }
#tC { background: #C00; width: 400px; float: left; margin-right: 20px; }
#b { background: #00C; height: 145px; float: left; position: relative }
#bottom { position: absolute; bottom: 44px; font-size: 13px }
</style>
</head>
<body>
<div id="container">
<div id="a"><a id="click" href="#">A</a></div>
<div id="tC">TC</div>
<div id="b">
<div id="title">BBBB BBBB BBBBB BBBBB </div>
<div id="bottom">words at the bottom of blue div!</div>
</div>
</div>
</body>
</html>单击A以切换红色div.
问题
蓝色div中的主要文本不包装.蓝色div本身被包裹,而不是文本包装和蓝色div总是"填充"行.
蓝色div中的"底部文本"应该粘在底部,无论主文本是单行还是两行.
TRi*_*RiG 14
提问者为他们自己的问题提供了这个答案,但它只是链接,因此被删除了.对于后代,这里又是,但代码带内联.
var i = 1;
$('#a').click(function() {
if (i === 0) {
$('#tC').animate({
width: "0",
}, 1500 );
$('#b').animate({
marginLeft: "140px",
}, 1500 );
i = 1;
} else {
$('tC').animate({
width: "400px",
}, 1500 );
$('#b').animate({
marginLeft: "540px",
}, 1500 );
i = 0;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#container { min-width: 900px; width: 98%; margin: 0 2%; float: left; border: 1px solid #000; height: 145px; overflow: hidden; white-space: nowrap;}
#a, #b, #tC { padding: 20px; font-size: 30px; height: 145px }
#a { background: #0C0; width: 100px; float: left; }
#tC { background: #C00; width: 0; float: left; }
#b { background: #00C; height: 145px; position: relative; margin-left: 140px; white-space: normal; }
#bottom { position: absolute; bottom: 44px; font-size: 13px }
</style>
</head>
<body>
<div id="container">
<div id="a"><a id="click" href="#">A</a></div>
<div id="tC">TC</div>
<div id="b">
<div id="title">BBBB BBBB BBBBB BBBBB BBBBBBBBBBB BBBBBBBBBB BBBBBBBBBBBBBB</div>
<div id="bottom">words at the bottom of blue div!</div>
</div>
</div>
</body>
</html>| 归档时间： |
|
| 查看次数： |
1371 次 |
| 最近记录： |