Question

我在div中有一段文字，我希望div有段落的高度，我似乎无法让它因某些原因而起作用。

.content {
  width: 960px;
  position: relative;
  float: left;
  padding: 20px
}
p {
  width: 100%;
  position: relative;
  display: block;
  clear: both;
}

<div class="content">
  <p>Some text here</p>
</div>

任何想法如何修复此代码，以便<div class="content">的高度等于段落内的高度。希望没有javascript的解决方案。

Answer 1

当你为段落添加更多内容时需要包装单词，我想你应该试试这个

.content {
width: 960px;
position: relative;
float: left;
padding: 20px;
word-wrap: break-word;

}

Answer 2

我相信你指的是如果你没有指定任何东西，浏览器会添加到<p>标签的默认边距。只需设置保证金：0;在<p>标记上修复它。见codepen

p {
  width:100%; 
  position:relative; 
  display:block; 
  clear:both;
  border: 1px solid green;
  height: 100%;
  margin:0;
}

div的高度不会改变到<p>的高度

2 个答案: