Как создать изменяемый размер 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

HTML <div> - элемент уровня блока, который по умолчанию заполняет все пространство его родительского (горизонтального) значения.

Вы можете изменить настройку по умолчанию display свойство элемента (родителя) в inline-block или inline, для достижения эффекта:

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

Answer 2

display: table; также вариант, который будет по-прежнему позволяют центрировать элемент. (С margin: auto;)