Question

我想创建一个框，可以根据内容的长度更改其宽度和高度。因此，如果它只有一条线，那么它的高度应该更小。如果它有10条线，它应该有更大的高度。我也想让盒子居中。先感谢您。我已经有了这个代码：

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

Answer 1

我想创建一个框，可以根据内容的长度更改其宽度和高度。

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

在此之前强制破坏文字的唯一方法是应用width或max-width

＆＃13;

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";
}

＆＃13;

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

＆＃13;

至于居中。根据您的要求，有多种技术。

Answer 2

我将如何做到这一点：

我剥离了所有内联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中的内容更改块的大小？

2 个答案: