Question

我的布局是一个流畅的（页面宽度的98％）包含框。我有多行占据了这个容器宽度的100％并且具有固定的高度。

我需要在每一行中使用3个div（绿色，红色，蓝色） - 但红色div会被隐藏，直到切换为止，此时它会滑出。目前，当红色div滑出时，根据蓝色div中“主文本”的数量，蓝色div将包裹在该行下面。

我的目标

my goal

尝试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 - 这可能不适用于较低分辨率。

Demo on JS Bin

尝试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。

Demo on JS Bin

问题

蓝色div中的主要文字不是包装。

，而不是文本换行和蓝色div总是“填充”行

蓝色div中的“底部文本”应该粘在底部，无论主文本是单行还是两行。

Answer 1

提问者为自己的问题提供了这个答案，但它只是链接，因此被删除了。对于子孙后代，这里又是，但代码是内联的。

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

Answer 2

您可以尝试询问蓝色元素的当前宽度， - = 400px，并同时向红色广告添加400xp，然后切换，蓝色宽度= 0px和红色+ = 400px？

var width $('bluebox').width();
width = width - 400;
$('bluebox').css('width', width + 'px');
$('redbox').animate({width: 'toggle'});

我可以防止浮动div在调整大小时包裹吗？

我的目标

尝试1

尝试2

问题

2 个答案: