Question

我的页面上有四个div。 outer_div包含其他三个：header，left-container和right-container。我对[{1}}和header毫不关心。实际上我的left-container div包含一个动态表。

问题是当表的大小增加时，right-container div不会自动增长。我的意思是它的大小保持不变。

HTML代码：

right-container

如何解决？这是 css ：

<html>
<body>
      <div id="outer_div" style="background-color:Gainsboro; position:relative; top:50px; left:50px;height:550px;border-radius:8px; border:groove; width:1240px">

                  <div id="header" style="background-color:Khaki    ; position:relative; top:5px; left:5px;height:50px;border-radius:8px; border:groove; width:1225px">
                           <h1 style="left:550px; position:relative; top:-7px">Admin Panel</h1>
                 </div> <!-- header ends-->

                  <div id="lef-container" style="background-color:LightSteelBlue    ; position:absolute; top:65px; left:4px;height:475px;border-radius:8px; border:groove; width:280px">      
                  </div> <!--left-container ends -->

                  <div id="right-container" style="background-color:LightSteelBlue      ; position:absolute; top:65px; left:294px;height:475px;border-radius:8px; border:groove; width:936px">    
                      <!-- this div contains dynamica table   -->
                  </div> <!--right-container ends -->  
      </div> <!--outer div ends -->
</body>
</html>

表

css ：

border:1px solid #000000;
border-collapse:collapse;
width:200px;
}
.mytable td{
background:#cccccc;
border:1px solid #000000;
}

Answer 1

<div style="display:inline-block;"></div>

这将根据其中的内容增加div大小。

Answer 2

正如其他人指出的那样，您使用的是固定的宽度和高度，因此元素将不会增长以适合内容。

但是我建议您通常以错误的方式进行此操作。

要考虑的一些较大原则：

避免内联样式。使用CSS设置元素的样式。
避免固定大小。改用flexbox之类的东西。

例如，这是我在这里所做的事情：

$("button").click(() => {
  console.log("foo");
  $(".right").append("<table/>");
});

.main {
  display: flex;
  flex-flow: column nowrap;

  /* I'm doing fixed size here, as we need an initial container size*/ 
  height: 100px;
  width: 500px;
}

header {

  /**
    A specific height on header seems ok. 
  */ 
  flex: 0 0 4em;  
  background-color: #ddf;
}

.content {

  /* Content fills the rest of the container*/ 
  flex: 1 0 auto;
  display: flex;
  flex-flow: row nowrap;
}

.left {

  /*Have a fixed width on the left. Maybe a percentage would be better*/ 
  flex: 0 0 10em;
  background-color: #fdd;
}

.right {

  /* Right fills the remainder*/ 
  flex: 1 0 auto;
  background-color: #dfd;
}

table {
  /*Fixed size for demonstration.*/
  border: solid 1px black;
  width: 150px;
  height: 150px;
}


button {
   margin: 1em; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button> click me to add content</button>

<div class="main">
  <header> admin panel </header>

  <div class="content">
    <section class="left"> left </section>
    <section class="right"> right </section>
  </div>
</div>

Answer 3

您在这里有2个选择

您可以使用浮点数和clearfix。
您可以使用display：flex
您可以使用display：grid然后使用flex

如果仅针对现代浏览器，则选项2和3会很好用。

请在下面找到相同的HTML和CSS。希望它能解决。

HTML

<!--outer div ends -->
<div id="outer_div" class="outer_div1">
  <div id="header" class="header1">
    <h1>Admin Panel</h1>
  </div>
  <div class="sec">
    <!-- header ends-->
    <div id="lef-container" class="left1">Left
    </div>
    <!--left-container ends -->
    <div id="right-container" class="right1">Right
      <!-- this div contains dynamica table   -->
    </div>
    <!--right-container ends -->
  </div>
</div>

CSS

.outer_div1 {
  background-color: Gainsboro;
  display: flex;
  flex-direction: column;
  margin: 0px auto;
  max-width: 1240px;

}

.sec{
  display: flex;
  flex-direction: row;
}
.header1 {
  background-color: Khaki;
  text-align: center;


}

.header1>h1 {

}

.left1 {
  background-color: LightSteelBlue;
  width:calc(30% - 1.5rem);
  margin: 1rem 1.5rem 1rem 1rem;
  min-height: 50vh;
  border-radius: .5rem;
  padding:1rem;
}

.right1 {
  background-color: LightSteelBlue;
  width:calc(70% - 1.5rem);
  min-height: 50vh;
  margin: 1rem 1.5rem 1rem 1rem;
  border-radius: .5rem;
  padding:1rem;
}

如何根据内容增加div的大小

3 个答案: