0

2 .child, 1 .screenこれらの3つの子ボックス（ ）を親（）の内側に合わせ.parentDivて、水平方向のスペースを完全に占有するにはどうすればよいですか。

javascriptを使用してこれを実行したくありません。参考のためにフィドル、私が欲しいのはここにあります

HTML：

<div id="parentDiv">
    <div class="child"></div>
    <div class="child"></div>
    <div class="screen"></div>
</div>​

.screen要素は、before要素またはmiddle要素にすることができます。

CSS：

#parentDiv {width:600px; height:400px; margin:10px auto; border:1px solid #000}

.child {width:100px; border:1px solid blue; float:left; height:100%}
.screen {float:left; border:1px solid red; height:100%;}

.child, .screen {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
​
4

3 に答える 3

2

で.screen、を追加overflow: hiddenおよび削除しfloat: leftます。

参照： http： //jsfiddle.net/thirtydot/s3zUd/1/

詳しくは。

于 2012-07-03T11:23:18.607 に答える
0

フィドルページが読み込まれていません。親の幅をそれらの間で均等に分割しようとしていますか？もしそうなら、あなたはそれらの幅を33.33％に設定しようとしましたか？

.child
{
    width: 33.33%;
}

.screen
{
    width: 33.33%;
}

または、さらに言えば、2 * child.width + screen.width = 100％の値のセット。

于 2012-07-03T10:47:32.110 に答える
0

リンクが機能していません。たぶん、あなたが探している解決策はフロートです。フロートは、テーブルやCSSの配置を使用せずに要素を配置するのに役立ちます。フロートの詳細はこちら

<div class="container">
<div class="child1"></div>
  <div class="child2"></div>
  <div class="screen"></div>
</div>

Css：

.container{width:100%; height:100%;}
.child1{float:left; width:25%; height:100%;}
.child2{width:30%; height:100%;}
.screen{width:45%; height:100%;}

働き

  function resize()(
{
var mydiv = document.getElementById("child1");
var curr_width = parseInt(mydiv.style.width);

var mydiv2 = document.getElementById("child1");
var curr_width2 = parseInt((mydiv.style.width);

document.getElementById("screen").style.width=(avaliablewidth-curr_width-curr_width2)+"px";
}

CSS3ソリューションコンテナの幅を使用可能な幅に設定し、これを各子要素に追加します

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:30%//Whatevet width you want it to have
float:left;
于 2012-07-03T10:50:46.683 に答える