0

固定幅のコンテナ内に2つのdivが隣り合っているとします。つまり、水平方向に隣り合っています。次に、1つのdivが削除されたとすると、他のdivがあった場所の隣のスペースを他のdivで埋めるにはどうすればよいですか？そのようにその幅を拡大する必要があります。

4

4 に答える 4

1

これがJavascriptなしでそれを行う方法です。

于 2012-04-21T16:40:22.493 に答える
1

これはIEでは機能しないと思います...Chrome、Firefox、Safariでテストしましたが、これでうまくいく可能性があります。

これがそのフィドルです。

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-21T14:54:40.700 に答える
0

jQueryを使用して、CSSのプロパティと可視性を操作できます。この例では、幅を変更します。

于 2012-04-21T14:48:06.503 に答える
0

でそれを行うことができますがdisplay: table;、IE7以下では機能しません。コードは次のとおりです。

<!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-21T17:14:26.590 に答える