如何使div容器在运行时内部数据增加时可扩展

我为这个问题挣扎了相当长的一段时间。我已经创建了一个html页面内的主容器，其中进一步包含3个容器(左，中，右)。在中间容器中，有许多div，这些div可以根据用户提交的文本增加。由于文本值在中间容器内增加，我希望每个容器(主，右，左和中间)都增加大小以适合内容。但这并没有发生，发布的数据是从容器出来的。

我在CSS中使用的位置是绝对的。

你能建议完成它的方法吗?哪种方式更好，CSS还是JavaScript?谢谢你的帮助。[下面是我面对的截图][10]

伙计们，请看下面的html代码和css。这是我想做的事。目前，我一直保持右容器的位置:相对的，因此，当div内的右容器正在增加，右容器正在扩大。如果我将中间容器的位置保持为相对位置，那么它就会根据里面的内容展开。但是，我希望它是这样的，如果任何子容器(左、中或右)展开，主容器也应该展开。有没有什么方法可以使用CSS来完成这个?如果没有，如何使用JavaScript和JQuery?

.wrapper {
  position: relative;
  top:10px;
  width: 100%;
  border: 1px solid black;
}
.left{
  position:absolute;
  top:0px;
  left:0px;
  width: 300px;
  margin: 0 auto;
  background-color:red;
  border: 1px solid black;
}
.middle{
  position:absolute;
  top:0px;
  left:400px;
  width: 300px;
  background-color:blue;
  border: 1px solid black;
}
.right{
  position:relative;
  top:0px;
  width: 300px;
  left:800px;
  background-color:pink;
  border: 1px solid black;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="SampleCSS1.css">
</head>
<body>
<div class="wrapper">
  <div class="left">
  <div>div in left</div><div>div in left</div><div>div in left</div>
  <div>div in left</div><div>div in left</div><div>div in left</div>
  <div>div in left</div><div>div in left</div><div>div in left</div>
  <div>div in left</div><div>div in left</div><div>div in left</div>
  <div>div in left</div><div>div in left</div><div>div in left</div>
  <div>div in left</div><div>div in left</div><div>div in left</div>
  <div>div in left</div><div>div in left</div><div>div in left</div>
  <div>div in left</div><div>div in left</div><div>div in left</div>
</div>
<div class="middle">
  <div>div in middle</div><div>div in middle</div><div>div in middle</div>
  <div>div in middle</div><div>div in middle</div><div>div in middle</div><div>div    in middle</div><div>div in middle</div>
  <div>div in middle</div><div>div in middle</div><div>div in middle</div><div>div in middle</div><div>div in middle</div>
  <div>div in middle</div><div>div in middle</div><div>div in middle</div><div>div in middle</div><div>div in middle</div>
  </div>
<div class="right">
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  <div>div in right</div><div>div in right</div><div>div in right</div>
  </div>
  </div>
  </body>
  </html>
enter code here

由于您使用了position:absolute，因此容器的高度将始终为0(或类似的值，取决于浏览器)。

所以如果你可以不使用position:absolute来设置主容器并且中间容器总是高于其他容器的情况下你可以这样做:

<div class="wrapper">
  <div class="main"></div>
  <div class="sub sub-left"></div>
  <div class="sub sub-right"></div>
</div>
.wrapper {
  position: relative;
  width: 960px;
}
.main {
  width: 760px;
  margin: 0 auto;
}
.sub {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
}
.sub-left {
  left: 0;
}
.sub-right {
  right: 0
}

当你不能没有position:absolute为所有的容器，它需要在ie7中工作，你必须做的javascript

您可以使用css表格来扩展容器的高度。例如:

你的包装:

.wrapper{
    display:table-row;
}

您的3列(容器):

.container{
    display:table-cell;
}

这将确保每一列的高度总是按照最高的展开

如果你想要所有3div扩展到相同的高度基于什么是在中间的表，我认为你将需要Jquery来做到这一点。如果你不关心左右div不会随着输入到中间div的动态数据而展开，那么你可以简单地在中间div中添加overflow。

#middlediv {
   overflow:hidden;
)

如果父容器标签有溢出，您还需要添加溢出。

相关内容

最新更新

热门标签：