2つのdivを隣り合わせに置くことはできますか？1つを削除すると、もう1つのdivがスペースを埋めるために展開されますか？

固定幅のコンテナに2つのdivが隣り合っているとします。横に横に並んでいます。次に、1つのdivが削除されたとします。他のdivがあった場所の隣のスペースを埋めるために、他のdivを取得するにはどうすればいいですか？それのようにその幅を広げるべきです。2つのdivを隣り合わせに置くことはできますか？1つを削除すると、もう1つのdivがスペースを埋めるために展開されますか？

出典

2012-04-21 user1154863

divをどのように削除しますか？ javascriptを使用している場合は、ユーザーがremoveイベントを開始するときに他のdivの幅をプログラムで設定できます。 –

それはちょうど場合に応じて表示されませんが、問題は2つのdivsは他の状態を知らないです – user1154863

Here's Javascriptをせずにそれを行う方法。

出典

2012-04-21 16:40:22

ちょっとサークルB thatsほとんどのdivは、右のdivが表示されていない場合は、右の拡大しないでください。何か案は？ – user1154863

LarsNyströmの答えに基づいて、私はこれを行った：http://jsfiddle.net/cVdBA/ –

jQueryを使用すると、CSSプロパティと可視性を操作できます。 this exampleで私は幅を変えます。

出典

2012-04-21 14:48:06

これはIEではうまくいかないと思います...私はChrome、Firefox、Safariでテストしましたが、これはうまくいくかもしれません。

Hereです。

CSS：

#container { 
    width: 400px; 
} 
#left { 
    width: 200px; 
    height: 200px; 
    background: #ddd; 
    float: left; 
} 
#right { 
    width:100%; 
    float: right; 
    height: 200px; 
    position: relative; 
    background: #CCC; 
} 
#left + #right { 
    width: 200px; 
}

Javascriptを：

function removeElement(divNum) { 
    var d = document.getElementById('container'); 
    var olddiv = document.getElementById(divNum); 
    d.removeChild(olddiv); 
}

HTML：

<div id="container"> 
    <div id="left"></div> 
    <div id="right"></div> 
    <input onclick="removeElement('left')" type="button" value="X"/> 
</div>

出典

2012-04-21 14:54:40

私はjsなしでこれを行うには、いくつかのCSSトリッキーがあると思っていた。私は知っているテーブルを使用することができますが、divを好むだろう – user1154863

display: table;とすることはできますが、IE 7以降では機能しません。コードは次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Test div</title> 
    <style type="text/css"> 
     #container { 
      width: 400px; 
      display: table; 
     } 

     #row-container { 
      display: table-row; 
     } 

     #left, #right { 
      display: table-cell; 
      height: 200px; 
     } 

     #left { 
      background-color: red; 
     } 

     #right { 
      background-color: blue; 
     } 
    </style> 
</head> 
<body> 
<div id="container"> 
    <div id="row-container"> 
     <div id="left"></div> 
     <div id="right"></div> 
    </div> 
</div> 
</body> 
</html>

出典

2012-04-21 17:14:26

2つのdivを隣り合わせに置くことはできますか？1つを削除すると、もう1つのdivがスペースを埋めるために展開されますか？

答えて

関連する問題