Question

如何将这三个子框（2 .child, 1 .screen）放在父（.parentDiv）内以完全占据水平空间。

我不想使用javascript这样做。小提琴参考，我想要的是here

HTML：

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

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

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 */
}

Answer 1

在.screen上，添加overflow: hidden并移除float: left。

请参阅： http://jsfiddle.net/thirtydot/s3zUd/1/

More information.

Answer 2

小提琴页面不适合我。您是否尝试在其中均匀分割父级的宽度？如果是这样，您是否尝试将其宽度设置为33.33％？

.child
{
    width: 33.33%;
}

.screen
{
    width: 33.33%;
}

或者就此而言，任何一组值都是2 * child.width + screen.width = 100％。

Answer 3

您的链接无效。也许，您正在寻找的解决方案是浮动。 Floats可帮助您定位元素，而无需使用表格或CSS定位。有关浮动here

的更多信息

<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;

如何在div中安装这些div以占据整个水平宽度

3 个答案: