让文字只占用现有空间？答案

【问题标题】：Make text only take up existing space?让文字只占用现有空间？
【发布时间】：2015-06-10 09:20:07
【问题描述】：

我有一个包含样式的 div。我需要这个 div 来环绕图像和文本内容，而不会占用不必要的空间。

当我只有一张图片时，这很容易：http://codepen.io/anon/pen/YXQyzr

.cont {
  text-align: center;
}
.cont2 {
  display: inline-block;
  border: 3px solid grey;
  padding: 10px;
  background: blue;
}

<div class="cont">
  <div class="cont2">
     <div class="image">
        <img width="400" src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg" />
     </div>
  </div>
</div>

但是当我有文本时，文本会扩展以占据整个宽度：http://codepen.io/anon/pen/WvOvqL

<div class="cont">
  <div class="cont2">
     <div class="image">
        <img width="400" src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg" />
     </div>
     <div class="text">
        <p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text        </p>
     </div>
   </div>  
</div>

我的布局是响应式的，内容是动态的，图像的大小（决定容器的大小）会有所不同。因此，我无法在任何东西上设置固定宽度。

【问题讨论】：

我不太明白你需要什么。你不能只浮动你的img吗？
我想要文本上方的图像，这与浮动通常实现的效果相反？
您想将文本限制在 img 的边界内？

标签： html css

【解决方案1】：

这可能对你有帮助

.cont {
  text-align: center;
}
.cont2 {
  display: inline-block;
  border: 3px solid grey;
  padding: 10px;
  background: blue;
  position:relative;
  
}
.text{
  position:absolute;
  background:blue;
  width:100%;
    left:-3px;
  border: 3px solid grey;
  border-top:0;
}

<div class="cont">
  <div class="cont2">
  <div class="image">
    <img width="400" src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg" />
  </div>
    <div class="text">
    <p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </div>
  </div>
  </div>
</div>  
</div>

【讨论】：

【解决方案2】：

您应该考虑从图像中删除宽度属性，并使用 css 使其完全响应。从那里您可以让 .text 符合图像的最大宽度，即提供您知道或可以提供图像的尺寸。 http://codepen.io/anon/pen/WvOQOq

此外，考虑将像素值转换为 em 以实现可扩展性（所需的宽度/应用字体大小）。例如如果应用默认字体大小为 16px，则图像宽度 400px = 400/16 = 25em。

<div class="cont">
  <div class="cont2">
  <div class="image">
    <img src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg" />
  </div>

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

.cont {
  text-align: center;
}

.cont2 {
  display: inline-block;
  border: 3px solid grey;
  padding: 10px;
  background: blue;
}

.image img {
  max-width: 400px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.text {
  max-width: 400px;
}

【讨论】：

我为演示目的设置的宽度属性，因为我使用的实际图像非常大。这是一个很好的解决方案，我需要最大宽度是图像的实际宽度，而不是像 400px 这样的任意值；
如果您使用的是 php，您可以随时使用 getimagesize 并在图像上设置内联宽度，例如$img_s = getimagesize($file); $img_w = $img_s[0]; style="width: em;"

【解决方案3】：

你可以这样尝试：Demo

.cont2 {

  border: 3px solid grey;
  padding: 10px;
  background: blue; 
  color:white;
  width: 1%;
  display: table;
  margin:auto;

}
.text{
  display: inline-block;     
}

【讨论】：

除了原始容器外，它是否可以在不硬编码任何宽度的情况下工作？在我没有指定图像宽度并让它成为原始尺寸的情况下。
内容宽度完全取决于img宽度。

【解决方案4】：

这可以通过显示表来完成： http://codepen.io/anon/pen/PqjPPB

<div class="con3">
<div class="cont">
  <div class="cont2">
  <div class="image">
    <img width="400" src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg" />
  </div>

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

.con3 {
  text-align: center;
}
.cont {
  display: inline-block;
}
.cont2 {
  border: 3px solid grey;
  padding: 10px;
  background: blue;
  display: table;
  width: 1px;
}
.image {
  display: table-row;
}
.text {
  display: table-row;
}

【讨论】：

【解决方案5】：

解决方案 #1

在容器div上设置width: min-content

Updated Codepen

.cont {
  text-align: center;
}
.cont2 {
  display: inline-block;
  border: 3px solid grey;
  padding: 10px;
  background: blue;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

<div class="cont">
  <div class="cont2">
    <div class="image">
      <img width="400" src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg" />
    </div>

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

解决方案 #2：

1) 在容器上设置display:table：和

2) 在文字上设置display: table-caption; 和caption-side: bottom;

Codepen

【讨论】：