在其中创建div适合文本的高度

时间：2016-11-05 10:03:35

标签： html css html5 css3 css-float

我应该如何设置我的div元素的样式，以便它内部的文本在小屏幕上使高度变大？我不想改变字体。如果高度不变大，则文本溢出。这是这种现象的一个例子。

Also made a pen, if you prefer working with it.

我发现这个answer我认为是我正在寻找的，但没有理解我应该如何进行修改。

#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>

5 个答案:

答案 0 :(得分：3)

首先，您可以为min-height: 200px和height: 200px添加test-first而不是test-second，这样可以解决您的问题。

一些建议：

  1. 如果您有更多float以下的内容，最好清除test-wrapper：

    #test-wrapper:after {
  content: '';
  display: block;
  clear: both;
}

  2. 此外，您无需为height

    3. 设置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>

    干杯！

答案 1 :(得分：2)

停止设置高度。如果需要，可以使用min-height：some设置最小高度，并根据需要拉伸。

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：2)

取代静态高度，您可以使用min-height或height：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>

答案 3 :(得分：1)

在代码if (data != null) { if (data.getExtras() != null) { if (data.getExtras().get("data") != null) { data.getExtras().get("data"); } } } else { // do someting if data is null } 和display:inline-block中添加两项更改，这会在不同的断点处自动更改内容div高度。

height:auto

这是jsFiddle。

答案 4 :(得分：1)

其他人为您提供了一些改变div大小的解决方案，您也可以强制div中的文本更改大小以适应内部，例如，您可以修改一个脚本，该脚本调整特定类中元素的大小，直到适合。并为你使用该课程。

@ThomasMcNaught的一个例子：

<div class='container'>
    <div class='no-resize'>This text won't be resized and will go out of the div.</div>
    <div class='resize'>This text will be resized and wont go out of the div.</div>
</div>

和

.no-resize, .resize {
   width: 100px;
   height: 50px;
   border: 1px solid #000;
   color: #000;
   float: left;
   margin-left: 10px;
   font-size: 15px
}

fiddler at：http://jsfiddle.net/mn4rr/1/

相关问题
最新问题