Html 按下旁边的Div

我有一个div，它推下另一个div， 我希望div“优惠券”及其所有内容都位于图像旁边的右上方。目前，上面有一个很大的空间

你可以看到所有文本都在的div被按下

我的HTML是：

<div id="coupon">

<?php

echo 

'<div id="coupon_wrapper">' .

    '<div id="coupon_image">' .

        '<img src="images/stores'. "/" . $row['storename'] .'.png">' . 

    '</div>' .

    '<div id="coupon_expire_date">' .

        "hi".

    '</div>'.

    '<div id="coupon_right">' .

        '<div id="design_coupon_title">' .

            '<a href="http://www.' . $row['coupon_link'] . '">' . ucfirst($row['coupon_title']) . '</a>' . 

        '</div>' .

    '</div>' .

'</div>' .

"<br>";

?>

</div>

编辑：

为了使网站正常工作，优惠券包装必须是绝对位置，而不是优惠券

这就是移除所有子位置并且没有使用“display:…”的情况，因为这些可能会导致问题

以下是更新的：CSS

#coupon_wrapper {
    position: absolute; 
}

#coupon {
    margin-bottom:10px;
    margin-right:5px;
    width:450px;
    height:120px;
    padding:10px;
    background-color:#fff;
    border:1px solid #ccc;
    border-radius: 3px;
    /*
    border:1px solid black;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    */
}

#coupon:hover {
    border:1px solid #aaa;
}

#coupon_image {
    width:130px;
    height:80px;
    background-color: #fff;

    border:1px solid black ;
}

#coupon_expire_date {
    width:130px;
    height:20px;

    border:1px solid black;
}

#coupon img {
    max-width:120px;
    max-height:70px;
    margin:0 auto;
    /* VERTICAL ALIGN */
    top: 50%;
    transform: translateY(-50%);
}

#coupon_right {
    width:290px;
    border:1px solid black;
    height:70px;
}

#design_coupon_title {
    text-align: center;
    height:40px;
    border:1px solid black;
    right:0;
}

#coupon a {
    text-decoration: none;
    color:black;
}

---

谢谢你迄今为止的建议，但似乎没有一个能解决问题，我认为是优惠券到期日导致了问题。

这里是一个开始：
我不能确定，因为我不喜欢你的照片

• 删除

  #优惠券img

  CSS规则
• 添加

  #优惠券(图像

  并替换

  #优惠券(右侧

#优惠券图像{
显示：内联块；
最大宽度：120px；
最大高度：70像素；
保证金：0自动；
浮动：左；
}
#优惠券对吗{
宽度：290px；
边框：1px纯黑；
高度：70像素；
显示：内联块；
位置：相对位置；
浮动：对；
}

这是一把小提琴
还缺少什么？

#优惠券包装{
/*位置：绝对位置*/
}
#息票{
边缘底部：10px；
右边距：5px；
宽度：450px；
高度：120px；
填充：10px；
背景色：#fff；
边框：1px实心#ccc；
边界半径：3px；
位置：相对位置；
/*
边框：1px纯黑；
-网络工具包盒阴影：2px2px5px0pxRGBA（0,0,0,0.75）；
-moz盒阴影：2px2px5px0pxrgba（0,0,0,0.75）；
盒影：2px2px5px0pxRGBA（0,0,0,0.75）；
*/
}
#优惠券：悬停{
边框：1px实心#aaa；
}
#优惠券图像{
宽度：130px；
高度：80px；
背景色：#fff；
位置：相对位置；
位置：绝对位置；
顶部：12px；
边框：1px纯黑；
}
#优惠券到期日{
宽度：130px；
高度：20px；
位置：绝对位置；
顶部：94px；
边框：1px纯黑；
边框顶部：0px；
}
#优惠券img{
显示：块；
最大宽度：120px；
最大高度：70像素；
保证金：0自动；
/*垂直对齐*/
位置：绝对位置；
最高：50%；
左：40%；
转化：translateY（-50%）；
}
#优惠券对吗{
宽度：290px；
边框：1px纯黑；
高度：70像素；
显示：内联块；
位置：绝对位置；
浮动：对；
左：35%；
}
#设计(优惠券)(名称){
文本对齐：居中；
高度：40px；
边框：1px纯黑；
右：0；
}

---

试试这个。请注意两个内联块div之间的注释（

）-这将删除块之间的空间-如果您想要在它们之间留一个空间，只需删除注释，它们将被几个像素隔开

#优惠券包装{
/*位置：绝对位置*/
}
#息票{
边缘底部：10px；
右边距：5px；
宽度：450px；
高度：120px；
填充：10px；
背景色：#fff；
边框：1px实心#ccc；
边界半径：3px；
位置：绝对位置；
/*
边框：1px纯黑；
-网络工具包盒阴影：2px2px5px0pxRGBA（0,0,0,0.75）；
-moz盒阴影：2px2px5px0pxrgba（0,0,0,0.75）；
盒影：2px2px5px0pxRGBA（0,0,0,0.75）；
*/
}
#优惠券：悬停{
边框：1px实心#aaa；
}
#优惠券图像{
宽度：130px；
高度：80px；
背景颜色：蓝色；
显示：内联块；
边框：1px纯黑；
}
#优惠券到期日{
宽度：130px；
高度：20px；
显示：内联块；
边框：1px纯黑；
}
#优惠券img{
显示：块；
最大宽度：120px；
最大高度：70像素；
保证金：0自动；
}
#优惠券对吗{
宽度：290px；
边框：1px纯黑；
高度：70像素；
显示：内联块；
背景：红色；
垂直对齐：顶部；
}
#设计(优惠券)(名称){
文本对齐：居中；
高度：40px；
边框：1px纯黑；
右：0；
}

#优惠券包装{
/*位置：绝对位置*/
}
#息票{
边缘底部：10px；
右边距：5px；
宽度：450px；
高度：120px；
填充：10px；
背景色：#fff；
边框：1px实心#ccc；
边界半径：3px；
位置：绝对位置；
/*
边框：1px纯黑；
-网络工具包盒阴影：2px2px5px0pxRGBA（0,0,0,0.75）；
-moz盒阴影：2px2px5px0pxrgba（0,0,0,0.75）；
盒影：2px2px5px0pxRGBA（0,0,0,0.75）；
*/
}
#优惠券：悬停{
边框：1px实心#aaa；
}
#优惠券图像{
宽度：130px；
高度：80px；
背景色：#fff；
位置：相对位置；
边框：1px纯黑；
}
#优惠券到期日{
宽度：130px；
高度：20px；
位置：相对位置；
边框：1px纯黑；
}
#优惠券img{
显示：内联；
最大宽度：120px；
最大高度：70像素；
保证金：0自动；
/*垂直对齐*/
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}
#优惠券对吗{
宽度：自动；
边框：1px纯黑；
高度：自动；
显示：内联块；
位置：相对位置；
浮动：对；
}
#优惠券左{
宽度：自动；
边框：1px纯黑；
高度：自动；
显示：内联块；
位置：相对位置；
浮动：左；
}
#设计(优惠券)(名称){
文本对齐：居中；
高度：40px；
边框：1px纯黑；
右：0；
}
#优惠券设计{
位置：绝对位置；
#coupon_wrapper {
    position: absolute; 
}

#coupon {
    margin-bottom:10px;
    margin-right:5px;
    width:450px;
    height:120px;
    padding:10px;
    background-color:#fff;
    border:1px solid #ccc;
    border-radius: 3px;
    /*
    border:1px solid black;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    */
}

#coupon:hover {
    border:1px solid #aaa;
}

#coupon_image {
    width:130px;
    height:80px;
    background-color: #fff;

    border:1px solid black ;
}

#coupon_expire_date {
    width:130px;
    height:20px;

    border:1px solid black;
}

#coupon img {
    max-width:120px;
    max-height:70px;
    margin:0 auto;
    /* VERTICAL ALIGN */
    top: 50%;
    transform: translateY(-50%);
}

#coupon_right {
    width:290px;
    border:1px solid black;
    height:70px;
}

#design_coupon_title {
    text-align: center;
    height:40px;
    border:1px solid black;
    right:0;
}

#coupon a {
    text-decoration: none;
    color:black;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        #coupon_wrapper {
            /* position: absolute; */
        }

        #coupon {
            margin-bottom: 10px;
            margin-right: 5px;
            width: 450px;
            height: 120px;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 3px;
            position: absolute;
            /*
        border:1px solid black;
        -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
        */
        }

            #coupon:hover {
                border: 1px solid #aaa;
            }


        #coupon_image {
            width: 130px;
            height: 80px;
            background-color: #fff;
            position: relative;
            border: 1px solid black;
        }

        #coupon_expire_date {
            width: 130px;
            height: 20px;
            position: relative;
            border: 1px solid black;
        }

        #coupon img {
            display: inline;
            max-width: 120px;
            max-height: 70px;
            margin: 0 auto;
            /* VERTICAL ALIGN */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        #coupon_right {
            width: auto;
            border: 1px solid black;
            height: auto;
            display: inline-block;
            position: relative;
            float: right;
        }

        #coupon_left {
            width: auto;
            border: 1px solid black;
            height: auto;
            display: inline-block;
            position: relative;
            float: left;
        }

        #design_coupon_title {
            text-align: center;
            height: 40px;
            border: 1px solid black;
            right: 0;
        }

        #coupon_design {
           position:absolute;
        }
    </style>
</head>
<body>
    <div id="coupon_wrapper">
        <div id="coupon_design">
            <div id="coupon_left">
                <div id="coupon_image">
                    Image Value
                </div>
                <div id="coupon_expire_date">
                    Hi expiry date
                </div>
            </div>
            <div id="coupon_right">
                <div id="design_coupon_title">
                    Right side value
                </div>
            </div>
        </div>
    </div>
</body>
</html>