如何根据CSS中的内容更改块的大小？

问题描述：

我想创建一个框，它可以根据其内容的长度更改其宽度和高度。所以如果它只有一条线，它应该有一个较小的高度。如果它有10条线，它应该有更高的高度。我也想让盒子居中。先谢谢你。我有这样的代码已经：如何根据CSS中的内容更改块的大小？

<div style=" border: 1px solid black; margin-left: auto; margin-right: auto; max-height: 25em; max-width: 20em; min-height: 10em; min-width: 12em; position: relative; white-space: nowrap"> 
<img src="https://4.bp.blogspot.com/-4wmRO867-W4/V7qwJGfVBYI/AAAAAAAAAL0/XQHdOxK34asRSXt3FfBKnOS_wGRcneFEwCEw/s1600/quote_basic.png" style="border: none; clear: left; float: left; position: relative;" /> 
<span style="font-style: italic; left: 50%; margin-right: -50%; margin: 0; position: absolute; text-align: center; top: 50%; transform: translate(-50% , -50%); display: inline-block;"> "This is the one-line content" </span> 
<img src="https://4.bp.blogspot.com/-kg4kc90TSqs/V7rjthACJLI/AAAAAAAAAMM/sV7buqkUWH8KqYfBVlCGnq14qMdo4eetwCLcB/s1600/quote_basic_mirrored.png" style="border: none; clear: right; float: right;position: relative; top: 8em" /> 
</div>

答

我想创建一个盒子，可以根据它的内容的长度改变其宽度和高度。

display:inline-block将完成大部分工作。唯一需要注意的是盒子会一直变宽，直到它达到其父母的100％宽度。

迫使文本的断裂之前，那么唯一的方法是应用或者是width或max-width

body { 
 
    text-align: center; 
 
} 
 
blockquote { 
 
    position: relative; 
 
    padding: 30px 60px; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    display: inline-block; 
 
    border: 1px solid grey; 
 
} 
 
blockquote:before, 
 
blockquote:after { 
 
    position: absolute; 
 
    width: 60px; 
 
    height: 60px; 
 
    font-size: 120px; 
 
    line-height: 120px; 
 
    font-family: Lobster; 
 
} 
 
blockquote:before { 
 
    top: 0; 
 
    left: 0; 
 
    content: "\201C"; 
 
} 
 
blockquote:after { 
 
    bottom: 0; 
 
    right: .0; 
 
    content: "\201D"; 
 
}

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> 
 

 
<blockquote> 
 
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, repellat.</span> 
 
</blockquote> 
 

 
<blockquote> 
 
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span> 
 
</blockquote> 
 

 
<blockquote> 
 
    <span>Lorem ipsum dolor.</span> 
 
</blockquote>

至于定心。根据您的要求，有多个技术。

答

这里是我会怎么做：

我剥了下来所有内嵌CSS：

<div> 
<img src="https://4.bp.blogspot.com/-4wmRO867-W4/V7qwJGfVBYI/AAAAAAAAAL0/XQHdOxK34asRSXt3FfBKnOS_wGRcneFEwCEw/s1600/quote_basic.png"/> 
<p> "This is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line content" </p> 
<img src="https://4.bp.blogspot.com/-kg4kc90TSqs/V7rjthACJLI/AAAAAAAAAMM/sV7buqkUWH8KqYfBVlCGnq14qMdo4eetwCLcB/s1600/quote_basic_mirrored.png"/> 
</div> 

div { 
    border: 1px solid #000; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    width: 50%; 
} 

p { 
    padding: 40px; 
} 

div img:nth-of-type(1) { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

div img:nth-of-type(2) { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
}

这里是结果的一个小视频：http://screencast.com/t/cSyF3mkvTS

如何根据CSS中的内容更改块的大小？

相关推荐