0

如何将这 3 个子框 ( 2 .child, 1 .screen) 放入父 ( .parentDiv) 中以完美占据水平空间。

我不想使用 javascript 来执行此操作。小提琴供参考，我想要的就在这里

HTML：

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

.screen 元素可以在之前或之后或中间元素。

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

您的链接无效。也许，您正在寻找的解决方案是浮动。浮动可帮助您在不使用表格或 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 回答
0

小提琴页面没有为我加载。您是否试图在它们之间平均分配父级的宽度？如果是这样，您是否尝试将它们的宽度设置为 33.33%？

.child
{
    width: 33.33%;
}

.screen
{
    width: 33.33%;
}

或者，就此而言，任何 2*child.width + screen.width = 100% 的值集。

于 2012-07-03T10:47:32.110 回答