Div推下它旁边的div

时间：2016-06-05 05:52:00

标签： html css

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

您可以看到包含所有文字的div，

enter image description here

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

这是我的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: block;
    max-width:120px;
    max-height:70px;
    margin:0 auto;
    /* VERTICAL ALIGN */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

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

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

编辑：

要使网站正常工作，＃coupon包装必须是绝对位置而不是#coupon

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

enter image description here

这是更新的：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;
}

谢谢你的建议到目前为止，但他们似乎没有解决问题，我想的是导致问题的coupon_expire_date。

5 个答案:

答案 0 :(得分：0)

这是一个开始：
无法确定，因为我没有使用您的图片。

  • 删除#coupon img CSS规则
  • 添加#coupon_image并替换#coupon_right 
#coupon_image {
    display: inline-block;
    max-width:120px;
    max-height:70px;
    margin:0 auto;
    float: left;
}

#coupon_right {
    width:290px;
    border:1px solid black;
    height:70px;
    display: inline-block;
    position: relative;
    float: right;
}
这是一个小提琴。 https://jsfiddle.net/warkentien2/jgmnc9ue/
还缺少什么？

答案 1 :(得分：0)

Pen

＆＃13;
＆＃13; 
#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: relative;
    /*
    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;
position: absolute;
top:12px;
    border:1px solid black ;
}

#coupon_expire_date {
    width:130px;
    height:20px;
    position: absolute;
Top:94px;
    border:1px solid black;
    border-top:0px;
}

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

#coupon_right {
    width: 290px;
    border: 1px solid black;
    height: 70px;
    display: inline-block;
    position: absolute;
    float: right;
    left: 35%;
}

#design_coupon_title {
    text-align: center;
    height:40px;
    border:1px solid black;
    right:0;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

由于您将外部（优惠券）div相对定位，因此子div应位于绝对位置。

答案 2 :(得分：0)

试试这个。注意两个内联块div之间的注释（<!-- -->） - 这会删除块之间的空格 - 如果你想在它们之间留一个空格，只需取出注释，它们就会被几个像素分开。 / p> 

#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: blue;
  display: inline-block;
  border: 1px solid black;
}
#coupon_expire_date {
  width: 130px;
  height: 20px;
  display: inline-block;
  border: 1px solid black;
}
#coupon img {
  display: block;
  max-width: 120px;
  max-height: 70px;
  margin: 0 auto;
}
#coupon_right {
  width: 290px;
  border: 1px solid black;
  height: 70px;
  display: inline-block;
  background: red;
  vertical-align: top;
}
#design_coupon_title {
  text-align: center;
  height: 40px;
  border: 1px solid black;
  right: 0;
}
<div id="coupon">
  <div id="coupon_image"></div><!--
  --><div id="coupon_right"></div>
</div>

答案 3 :(得分：0)

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

答案 4 :(得分：0)

尝试使用Bootstrap而不是编写自己的CSS类。这会让你的生活更轻松。以下链接将引导您进入网格示例，该示例将解决您的问题。您可以根据需要划分浏览器并以响应方式划分。

http://getbootstrap.com/css/#grid-example-basic

相关问题
最新问题