使文字只占用现有空间？

Question

我有一个包含样式的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>

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

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

Answer 2

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

另外，考虑将像素值转换为ems以实现可伸缩性（所需的宽度/应用字体大小）。例如如果app默认字体大小为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;
}

Answer 3

这可以通过显示表来完成： 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;
}

Answer 4

您可以尝试这样做： Demo

.cont2 {

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

}
.text{
  display: inline-block;     
}

Answer 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