关于CSS盒子模型设计的问题[关闭]

r7s23pms  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(171)

已关闭,此问题需要details or clarity。目前不接受答复。
**想改善这个问题吗?**通过editing this post添加详细信息并澄清问题。

4天前关闭。
Improve this question
我在输出所需结果方面有问题。我在index.html文件中创建了两个div,并添加了height,width和background-color属性,所以我应该只显示两个div部分,每个div的内容和height,width和background-color,所以它会显示一些意想不到的东西。
代码的真实的输出是正确的。如果我在任何浏览器编译器上编写相同的代码,输出都是正确的,但在我的本地浏览器中却不正确。
我的本地浏览器中的代码输出:

div {
  height: 200px;
  width: 500px;
  background-color: pink;
}
<body>
  <h1>Random Heading</h1>
  <div>
    Now is the winter of our discontent Made glorious summer by this sun of York; And all the clouds that lour'd upon our house In the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; Our bruised arms hung up for monuments;
    Our stern alarums changed to merry meetings, Our dreadful marches to delightful measures. Grim-visaged war hath smooth'd his wrinkled front;
  </div>
  <div>
    And now, instead of mounting barded steeds To fright the souls of fearful adversaries, He capers nimbly in a lady's chamber To the lascivious pleasing of a lute. But I, that am not shaped for sportive tricks, Nor made to court an amorous looking-glass;
    I, that am rudely stamp'd, and want love's majesty To strut before a wanton ambling nymph; I, that am curtail'd of this fair proportion,
  </div>

  <button>Click me</button>
</body>
2vuwiymt

2vuwiymt1#

要根据HTML中div元素的内容自动调整其高度,可以使用某些CSS属性。有一个例子。
在那个

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      align-items: center;
    }

    .content {
      width: 300px;
      border: 1px solid #ccc;
      padding: 10px;
      overflow: hidden;
      /* The following properties will automatically adjust the div's height based on the content size */
      height: auto;
      display: inline-block;
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pretium feugiat purus ac tincidunt. Nullam tristique finibus orci, non vestibulum ipsum hendrerit a. Mauris dapibus mi non ex iaculis bibendum.
    </div>
  </div>
</body>
</html>

例如,. container类中有一个div元素,文本驻留在. content类中。应用于. content类的CSS属性,例如height:auto;,允许根据内容大小自动调整高度。单词wrap:断字属性可确保内容在不适合的情况下换行在一行内。
这样,div元素的高度将根据内容的长度自动调整,并且内容将不会溢出显示。

相关问题