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

Can I prevent a floating div from wrapping when it's resized?

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'});

Can I prevent a floating div from wrapping when it's resized?

My goal

Attempt 1

Attempt 2

Problems

精彩评论

关注公众号

热门标签

图文推荐

Can I prevent a floating div from wrapping when it's resized?

My goal

Attempt 1

Attempt 2

Problems

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：