Question

我为这个问题可能产生的任何混淆道歉，我只是把我的脚趾浸入html中，并且感谢任何帮助。

要指定我正在谈论的元素，我已将他们的CSS选择器放在括号内，以试图消除混淆。出于某种原因，我的父级#box_one div{}正在调整其子级别的高度，但不是它的宽度。

例如，儿童div的#box_one div{} > div身高为100px，因此父母的父级调整到该高度，加上额外的填充。但是，当我将子div的#box_one div > div宽度更改为20px时，父div #box_one div{}保持不变，其宽度取决于最外层的父#box_one。

＆＃13;

#box_one {
  border: 3px outset #eee;
  margin: 10px;
  width: 400px;
  height: 400px;
  background-color: #eee;
  padding-top: 1%;
  padding-bottom: 1%;
  padding: 10px;
}
#box_one div {
  margin-top: 20px;
  border: inset;
  padding: 5%;
}
#box_one div>div {
  height: 100px;
  width: 200px;
  margin: 0px;
}
p {
  text-align: center;
  border-style: inset;
  margin-top: 0px;
}

＆＃13;

<html>

<head>
  <title>Text</title>
  <link rel="stylesheet" type="text/css" href="website.css">
</head>

<body>
  <div id="box_one">
    <p>This is some text.</p>
    <div>
      <div></div>
    </div>
  </div>

</body>

</html>

＆＃13;

Answer 1

默认情况下，块元素将占用所有可用宽度，默认为0。因此，除非另有定义，否则父元素将始终为100％宽度，但仅与其子元素一样高。

如果您希望父级宽度与其子级宽度一致，则可以将float（如float: left;）或display: inline-block;分配给父级。

* {box-sizing:border-box;}
#box_one {
  border: 3px outset #eee;
  margin: 10px;
  background-color: #eee;
  padding-top: 1%;
  padding-bottom: 1%;
  padding: 10px;
  float: left;
}
#box_one div {
  margin-top: 20px;
  border: inset;
  padding: 5%;
}
#box_one div>div {
  height: 100px;
  width: 200px;
  margin: 0px;
}
p {
  text-align: center;
  border-style: inset;
  margin-top: 0px;
}

<html>

<head>
  <title>Text</title>
  <link rel="stylesheet" type="text/css" href="website.css">
</head>

<body>
  <div id="box_one">
    <p>This is some text.</p>
    <div>
      <div></div>
    </div>
  </div>

</body>

</html>

Answer 2

您可以将其设为inline-block并从其CSS中删除所有宽度和高度设置。但在这种情况下，请确保孩子有内容和/或固定的宽度和高度：

#box_one{
    border:3px outset #eee;
    margin:10px;
    display: inline-block;
    background-color: #eee;
    padding-top: 1%;
    padding-bottom: 1%;
    padding:10px;
}
#box_one div{
    margin-top:20px; 
    border:inset;
    padding: 5%;    
}

#box_one div>div{
    height: 100px;  
    width:200px;
    margin:0px; }

p{
    text-align: center;
    border-style:inset; 
    margin-top:0px;
}

    <head>  
        <title>Text</title> 
        <link rel="stylesheet" type="text/css" href="website.css">
    </head>
     <body> 
        <div id="box_one">
            <p>This is some text.</p>
            <div>
                <div></div>
            </div>
        </div>

     </body>

Answer 3

Div是块元素，并尽量在水平方向上占用尽可能多的空间，因此如果未指定某个宽度，它实际上占用了它的父div的宽度。

div的高度由孩子的身高决定，但宽度将由父亲的宽度决定。要围绕它的孩子调整div，最好将父div的宽度设置为您需要的宽度，并将子div的宽度设置为100％以及孩子的身高到你需要的高度，或者添加你需要的内容，两个div都会采用它的高度。

div.parent {
   width: 20px;
}
div.child {
   width: 100%;
   height: 50px;
}

<div class="parent">
     <div class="child"></div>
</div>

Answer 4

设置在最大的子元素内：

display: contents;

如何自动调整儿童div周围的父div？

4 个答案: