php - 将元素置于另一个元素的右侧

Question

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

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

<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>

带有 alt="Create Thumbnail"的图像源已经在中心，但图像源 alt="Thumbnail Preview"位于页面的左侧。如果我将此元素放在右侧 float ，那么它会移动到页面的最右侧页面，我不想使用边距来设置它，否则就可以了。

Answer 1

.imageuploadcropcontainer {
    margin: 0 auto;
    width: 300px;
}

.imageuploadcropcontainer #thumbnail,
.imageuploadcropcontainer .hello {
    width: 50%;
    float: left;
}

.imageuploadcropcontainer:after {
  content: '';
  display: block;
  clear: both;
}

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

评论问题后更新:

can i manipulate the space between the two

当然可以，这取决于您的确切需求。现在两者之间没有空间。运行下一个代码段时查看绿色边框。

.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;
}

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