将元素的宽度限制为第一个子元素的宽度 [英] Restrict width on element to width of first child

问题描述

基本上，这个想法非常简单，我有一个 .item div，其中包含 img 和 p 。
图像不能高于320px，所以我添加 max-height：320px ，为了保持宽高比，它也有 width：auto 。

到目前为止很好...

部分是：父< .item div的宽度必须与 img

但是因为 p 包含的文本比图片宽，所以不起作用。

我在这里创建了一个JS Bin： http：// jsbin .com / liyeratuzadu / 1 / edit
在这个JS Bin中，在CSS选项卡中查找以下代码：

  .item p {
 / * width：100px; * / 
} 
  

取消注释该行以查看所需的结果。

提示：不要在 p 因为我不认为这是非常敏感。

解决方案

解决方案＃

1）在项目

上设置 display：table

2）给它一个非常小的宽度说 width：1px

  .item {
 display：table; 
 width：1px; 
 background：tomato; 
} 
  

更新JsBin

  body {text -align：center;}。item {display：table; width：1px; background：tomato;}。item img {display：block; / *删除与inline-block的间距（默认）* / width：auto; max-height：320px; margin：0 auto 0;}  

 < div class = item> < img src =http://dummyimage.com/500x700/> < p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 < / p>< / div>  

解决方案＃2 - 使用内部大小（非IE兼容）

  .item {
 width：-moz-min-content; 
 width：-webkit-min-content; 
 width：min-content; 
 background：tomato; 
} 
  

  .item {width： -moz-min-含量; width：-webkit-min-content; width：min-content; background：tomato;}。item img {display：block; / *删除与inline-block的间距（默认）* / width：auto; max-height：320px; margin：0 auto 0;}  

 < div class = item> < img src =http://dummyimage.com/500x700/> < p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 < / p>< / div>  

1）浏览器支持相当不错（除了IE）

2）这里有一篇文章介绍了 min-content 属性

I have a pretty tricky situation here which I am trying to solve with CSS only.

Basically, the idea is extremely simple, I have an .item div which holds an img and a p. The image cannot be taller than 320px, so I added max-height: 320px, in order to maintain aspect ratio, it also has width: auto.

So far so good...

The tricky part is: the parent .item div, must have the same width as the img

But because the p contains text which spans wider than the image, it doesn't work.

I have created a JS Bin here: http://jsbin.com/liyeratuzadu/1/edit In this JS Bin, look for the following code in the CSS tab:

.item p {
  /*width: 100px;*/
}

Uncomment the line to see the desired result.

Tip: Don't wanna have a fixed width on the p as I don't think that is very responsive.

解决方案

Solution #1 - The display:table method

1) Set display:table on the item

2) Give it a very small width say width: 1px

.item {
  display: table;
  width: 1px;
  background: tomato;
}

Updated JsBin

body {
  text-align: center;
}
.item {
  display: table;
  width: 1px;
  background: tomato;
}
.item img {
  display: block;
  /* removes spacing from inline-block (default) */
  width: auto;
  max-height: 320px;
  margin: 0 auto 0;
}

<div class="item">
  <img src="http://dummyimage.com/500x700/">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea impedit labore atque illo autem inventore totam, voluptatem tempore repudiandae.</p>
</div>

Solution #2 - Make use of intrinsic sizing (not IE compatible)

.item {
  width: -moz-min-content; 
  width: -webkit-min-content; 
  width: min-content;
  background: tomato;
}

.item {
  width: -moz-min-content;
  width: -webkit-min-content;
  width: min-content;
  background: tomato;
}
.item img {
  display: block;
  /* removes spacing from inline-block (default) */
  width: auto;
  max-height: 320px;
  margin: 0 auto 0;
}

<div class="item">
  <img src="http://dummyimage.com/500x700/">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea impedit labore atque illo autem inventore totam, voluptatem tempore repudiandae.</p>
</div>

1) Browser support is quite good (except for IE)

2) Here's an article explaining the min-content property

这篇关于将元素的宽度限制为第一个子元素的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！