0

我在这个问题上挣扎了很长一段时间。我在一个 html 页面内创建了一个主容器，该页面还包含 3 个容器（左、中和右）。在中间容器中，有多个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
4

3 回答 3

1

由于您使用 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 来做到这一点。

于 2013-03-04T18:13:22.827 回答
0

If you want all 3 divs to expand to the same height based on just what is in the middle table I think you will need Jquery to do that. If you don't care that the left and right divs do not expand with the dynamic data being entered into the middle div then you can simply add overflow to the middle div.

#middlediv {
   overflow:hidden;
)

You would also need to add overflow to the parent container tag if there is one.

于 2013-03-04T18:02:59.257 回答
0

您可以使用 css 表使您的容器在高度上扩展。例如：

你的包装：

.wrapper{
    display:table-row;
}

您的 3 列（容器）：

.container{
    display:table-cell;
}

这将确保每列的高度总是按照最高的扩展。

于 2013-03-04T17:09:07.070 回答