Question

我在照片上传裁剪工具中有两个元素，我试图将它们放在中心并排放置。

＆＃13;

    .imageuploadcropcontainer {
    	text-align:center;
    	margin: 0 auto;
    }

＆＃13;

<div class="imageuploadcropcontainer">
        <img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
        <div style="border:1px #e5e5e5 solid; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
            <img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="position: relative;" alt="Thumbnail Preview" />
        </div>

＆＃13;

带有alt =＆＃34的图像源;创建缩略图已位于中心，但图像源alt =＆＃34;缩略图预览＆＃34;在页面的左侧。如果我将这个元素放在浮动状态，那么它会转到页面的右侧，我不想使用边距来设置它，否则就可以了。

Answer 1

＆＃13;

.imageuploadcropcontainer {
    margin: 0 auto;
    width: 300px;
}

.imageuploadcropcontainer #thumbnail,
.imageuploadcropcontainer .hello {
    width: 50%;
    float: left;
}

.imageuploadcropcontainer:after {
  content: '';
  display: block;
  clear: both;
}

＆＃13;

<div class="imageuploadcropcontainer">
    <img src="" id="thumbnail" alt="Create Thumbnail" />
    <div class="hello" >
        <img src="#" alt="Thumbnail Preview" />
    </div>

＆＃13;

在评论问题后更新：

我可以操纵两个
之间的空间

当然可以，取决于你想要什么。现在两者之间没有空间。运行下一个代码段时看到绿色边框。

＆＃13;

.imageuploadcropcontainer {
    margin: 0 auto;
    width: 300px;
    border: solid 1px orange;
}

.imageuploadcropcontainer #thumbnail,
.imageuploadcropcontainer .hello {
    width: calc(50% - 2px);  /* 2px is border 1px left + 1px right from each box */
    float: left;
    border: solid 1px green;
}

.imageuploadcropcontainer:after {
  content: '';
  display: block;
  clear: both;
}

＆＃13;

<div class="imageuploadcropcontainer">
    <img src="" id="thumbnail" alt="Create Thumbnail" />
    <div class="hello" >
        <img src="#" alt="Thumbnail Preview" />
    </div>

＆＃13;

将元素带到另一个元素的右侧

1 个答案: