Can I prevent a floating div from wrapping when it's resized?
My layout is a fluid (98% of page width) containing box. I have multiple rows that take up 100% of the width of this container and have fixed height.
I need 3 divs (green, red, blue) in each row — but the red div is hidden until toggled on, at which point it slides out. Currently, when the red div slides out, depending on the amount of “Main Text” in the blue div, the blue div will wrap under the row.
My goal
Attempt 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>Click the A to toggle the red div — this may not work on lower resolutions.
Demo on JS Bin.
Attempt 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; }
开发者_Python百科 #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>Click the A to toggle the red div.
Demo on JS Bin.
Problems
The Main Text in the blue div is not wrapping. Instead of the text wrapping and the blue div always “filling in” the row, the blue div itself gets wrapped.
The “bottom text” in the blue div should stick to the bottom, whether the Main Text is a single line or two lines.
The asker provided this answer to their own question, but it was link-only and was therefore removed. For posterity, here it is again, but with the code brought inline.
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>Demo on JS Bin.
You could try interrogating the blue element for its current width, -= 400px, and add 400xp to red ad the same time, then toggle, blue width = 0px and red += 400px?
var width $('bluebox').width();
width = width - 400;
$('bluebox').css('width', width + 'px');
$('redbox').animate({width: 'toggle'});
加载中,请稍侯......
精彩评论