Question

如何根据img宽度制作内部div自动宽度？

<div style="width: 900px">
   <img src="img.png" width="No one knows. All time different." />
   <div>I want to make this block auto width according to img width</div>
</div>

我需要IMG和内部DIV显示INLINE。

这就是我真正拥有的：http://jsbin.com/beyijira/1/edit

Answer 1

编辑：可能更好的解决方案......

- HTML

<div style="width: 700px">
    <div class="image">
        <img src="http://jsfiddle.net/img/logo.png" />
    </div>
   <div class="content">
           I want to make this block auto width according to img width
   </div>
</div>

- CSS

.image {
    background: red;
    display: table-cell;
}
.content {
    background: blue;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

http://jsfiddle.net/6N3tH/

---旧解决方案-----

嗯......这就是你想要的吗？试试吧......

- HTML

<div style="width: 700px" class="clearfix">
    <div class="image">
        <img src="http://jsfiddle.net/img/logo.png" />
    </div>
   <div class="content">
           I want to make this block auto width according to img width
   </div>
</div>

- CSS

.image {
    background: red;
    float: left;
    position: relative;
    z-index: 2;
}
.content {
    background: blue;
    width: 100%;
    position: relative;
    z-index: 1;
    left: 20px;
}
.clearfix:after,
.clearfix:before {
    content: '';
    display: table;
}
.clearfix:after {
    clear: both;
}

不是我最可爱的解决方案，但它有效：|

http://jsfiddle.net/2MQfn/

Answer 2

使用此标记

<强> HTML：

<div style="width: 900px">
   <div class="outer">
      <img src="img.png" width="No one knows. All time different." />
      <div class="inner">I want to make this block auto width according to img width</div>
   </div>
   <div class="clear">
</div>

<强> CSS：

.clear{clear:both;}
.outer{float:left;}
.inner{width:100%;}

DEMO

Answer 3

检查下面的jsfiddle。

HTML：

<div style="width: 900px">
  <div class="main">  
   <div class="outer">
  <img src="img.png" width="100px" />
</div>    
  <div class="inner">I want to make this block auto width according to img width</div>
   </div>   
</div>

CSS：

.clear{clear:both;}
.main{display:table; width:1%;}
.outer{display:table-row;}
.inner{width:1%; display:table-row;}

DEMO

剩下的地方的宽度

3 个答案: