如何根据内部元素的大小创建可调整大小的div

Question

我有一个父div（like_user_wrapper），其中包含一个小图像图标，这是我的代码：

<?php

 echo '<div class="like_user_wrapper" id=" '.$post_id.'like_user_wrapper  ">';


 $who_like=getpostdetail($blog_feeds['id'],'who_like');
 $like_user_array=explode(',',$who_like);
 foreach($like_user_array as $name){
    if($name!=''){
        $friend_pic=getfrienddata('profile_pic',$name);
        $f_name=$name;  
        require 'small_friend_message_image.php';
    }
 }

 echo '</div>';
?>

CSS

.like_user_wrapper{
    margin-top:20px;
    padding:5px; 
    height:30px;
    box-shadow:1px 1px 10px #f0f0f0;
    position:relative;
    background:white;
}

但是包装纸的宽度不能与整个图像的宽度成正比。

Answer 1

display: table; 也是一个选项，仍然可以让您将元素居中。 （ margin: auto; ）

Answer 2

HTML <div>是一个块级元素，默认情况下会填充其父级的整个空间（水平）。

您可以将（parent）元素的默认display属性更改为inline-block或inline ，以实现以下效果：

.like_user_wrapper {
    display: inline-block;
    *display: inline;  /* <-- inline-block hack for IE6/7 */
    *zoom: 1;
}