Geek asks and answers

Can I prevent a floating div from being wrapped when resized?

My layout is a liquid (98% of the width of the page) containing the box. I have several lines that occupy 100% of the width of this container and have a fixed height.

I need 3 divs (green, red, blue) in each row, but the red div is hidden until it switches, and at that moment it exits. Currently, when a red div opens, depending on the amount of “body text” in the blue div, the blue div will depend on the line.

My goal

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>
Run codeHide result

Press A to toggle the red div - this may not work at 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; }
  
  #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>
Run codeHide result

Press A to toggle the red div.

Demo on JS Bin .

Problems

div . div "" , div .

" " div , , .

+3
2

, . , .

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>
Hide result

JS Bin.

+14

, - = 400px 400xp , , = 0px + = 400px?

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

More articles:


All Articles