使div的高度与其内的文本相匹配

Question

我应该如何格式化我的div元素，这样它里面的文本就会使小屏幕上的高度更大？我不想改变字体。如果高度没有变大，超过文本溢出。这就是这种现象的一个例子。

还做了一支笔，如果你喜欢用它。

我找到了这个回答，我相信这就是我要找的东西，但是我不知道我应该如何做我的修改。

​

#index-customer-title {
  margin: 40px 20px 40px 20px;
}
#test-wrapper {
  top: 0;
  left: 0;
  right:0;
  height: 240px;
  max-width: 1200px;
  text-align: left;
  margin: auto;
  position: relative;
}
#test-first {
  display: inline;
  width: 44%;
  float: left;
  height: 200px;
  margin-left: 3.33%;
  margin-right: 3.33%;
  margin-top: 20px;
  margin-bottom: 3.33%;
  text-align: left;
  display: inline-block;
  border: 2px solid #d5d5d5;
}
#test-second {
  display: inline;
  width: 44%;
  float: right;
  height: 200px;
  margin-right: 3.33%;
  margin-top: 20px;
  margin-bottom: 3.33%;
  text-align: left;
  display: inline-block;
  border: 2px solid #d5d5d5;
}
.quotes {
  font-style: italic;
  padding-top: 10px;
  font-size: 18px;
}

<div id="test-wrapper">
  <div id="test-first">
    <blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "</blockquote>
  </div>

  <div id="test-second">
    <blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "
    </blockquote>
  </div>
</div>

​

Answer 1

首先，您可以将min-height: 200px而不是height: 200px用于test-first和test-second，这解决了您的问题。

一些建议：

1. 如果在float下面有更多的内容，最好清除test-wrapper： #test-包装器:在{ content：‘’之后；显示:块；清空:均为；}
2. 另外，您也不需要为height设置test-wrapper

​

#index-customer-title {
  margin: 40px 20px 40px 20px;
}
#test-wrapper {
  top: 0;
  left: 0;
  right:0;
  /*height: 240px;*/
  max-width: 1200px;
  text-align: left;
  margin: auto;
  position: relative;
}
#test-first {
  display: inline;
  width: 44%;
  float: left;
  min-height: 200px;
  margin-left: 3.33%;
  margin-right: 3.33%;
  margin-top: 20px;
  margin-bottom: 3.33%;
  text-align: left;
  display: inline-block;
  border: 2px solid #d5d5d5;
}
#test-second {
  display: inline;
  width: 44%;
  float: right;
  min-height: 200px;
  margin-right: 3.33%;
  margin-top: 20px;
  margin-bottom: 3.33%;
  text-align: left;
  display: inline-block;
  border: 2px solid #d5d5d5;
}
.quotes {
  font-style: italic;
  padding-top: 10px;
  font-size: 18px;
}
#test-wrapper:after {
  content: '';
  display: block;
  clear: both;
}

<div id="test-wrapper">
  <div id="test-first">
    <blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "</blockquote>
  </div>

  <div id="test-second">
    <blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "
    </blockquote>
  </div>
</div>

​

干杯!

Answer 2

停止设置高度。如果您需要，设置一个最低高度使用最小高度:某某，并将根据需要伸展。

​

#index-customer-title{
margin:40px 20px 40px 20px;
}

#test-wrapper{
top:0;
left:0;
right0;
height:240px;

max-width:1200px;
text-align:left;
margin: auto;
    position: relative;

}
#test-first{
display:inline;
width:44%;
float:left;
/*    height:200px;*/
margin-left:3.33%;
margin-right:3.33%;
margin-top:20px;
margin-bottom:3.33%;
text-align: left;
display:inline-block;
border:2px solid #d5d5d5;




}

#test-second{
dislay:inline;
width:44%;
float:right;
 /*   height:200px;*/
margin-right:3.33%;
margin-top:20px;
margin-bottom:3.33%;
text-align: left
display:inline-block;
border:2px solid #d5d5d5;

}

.quotes{
font-style:italic;
padding-top:10px;
font-size:18px;
}

<div id="test-wrapper">
	<div id="test-first">
		<blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "</blockquote>
	</div>

	<div id="test-second">
		<blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "
		</blockquote>
	</div>
</div>

​

Answer 3

而不是静态高度，您可以使用最小高度或高度: auto，这样的高度与其内容相适应

​

#index-customer-title{
margin:40px 20px 40px 20px;
}

#test-wrapper{
top:0;
left:0;
right0;
height:auto;

max-width:1200px;
text-align:left;
margin: auto;
    position: relative;

}
#test-first{
display:inline;
width:44%;
float:left;
min-height:200px;
margin-left:3.33%;
margin-right:3.33%;
margin-top:20px;
margin-bottom:3.33%;
text-align: left;
display:inline-block;
border:2px solid #d5d5d5;




}

#test-second{
dislay:inline;
width:44%;
float:right;
height:auto;
margin-right:3.33%;
margin-top:20px;
margin-bottom:3.33%;
text-align: left
display:inline-block;
border:2px solid #d5d5d5;

}

.quotes{
font-style:italic;
padding-top:10px;
font-size:18px;
}

<div id="test-wrapper">
	<div id="test-first">
		<blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "</blockquote>
	</div>

	<div id="test-second">
		<blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "
		</blockquote>
	</div>
</div>

​