我的布局是一个包含框的流体(占页面宽度的 98%)。我有多个行，它们占据了该容器 100% 的宽度并且具有固定的高度。
我需要在每一行中放置 3 个 div(绿色、红色、蓝色)——但是红色 div 在打开之前一直处于隐藏状态，此时它会滑出。目前，当红色 div 滑出时，根据蓝色 div 中“Main Text”的数量，蓝色 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 总是“填充”行。
无论 Main Text 是单行还是两行，蓝色 div 中的“底部文本”都应该贴在底部。
最佳答案
提问者对他们自己的问题提供了这个答案，但它只是链接，因此被删除了。为了后代，这里又出现了，但是代码是内联的。
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>关于jquery - 我可以防止 float div 在调整大小时换行吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6308770/