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>是一个块级元素，默认情况下填充其父级（horizontallty）的整个空间。

您可以将（父）元素的默认display属性更改为inline-block或inline，以达到效果：

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

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

2 个答案: