Question

我想将div故事放在图片的底部（mainMedia），但我也希望将div放在照片的顶部。

当我尝试这样做时，故事div会登顶，因为mainMedia潜水是位置：绝对但我必须保持这一点以保持潜水在它之上...任何想法？

你能帮忙吗？

非常感谢！

HTML

<html>
<head>
    <title> Beta</title>
    <!-- css links -->
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="gigantic">
        <div class="main">
            <div class="twitterProfilePicture">
                <img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png">
            </div>
            <div class="push">
                <div class="mainMedia">
                    <img src="http://blog.sunsafaris.com/wp-content/uploads/2013/02/dune-king-lion.jpg">
                    <div class="about">
                        <p><span>Mashable</span></br>3 Hours ago</p>
                    </div>
                </div>
            </div>  
            <div class="Story">
                <div class="heading">

                </div>
                <div class="text">

                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

body
{
    margin: 0;
    background-color: rgb(233,234,237);
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}

p
{
    margin: 0;
}

.gigantic
{
    width: 800px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px;
    margin-top: 40px;
    /*background-color: #fff;*/
}

.main
{
    width: 700px;
    height: 400px;
    /*background-color: #000;*/
    margin-right: auto;
    margin-left: auto;
    padding: 30px;
}

.twitterProfilePicture
{
    width: 55px;
    height: 55px;
    border-radius: 3px;
    /*background-color: #fff;*/
    position: relative;
    float: left;
}

.twitterProfilePicture img
{
    width: 55px;
    height: 55px;
    border-radius: 3px;
    /*background-color: #fff;*/
    position: relative;
    float: left;
}

.mainMedia
{
    width: 630px;
    height: auto;
    /*background-color: #fff;*/
    float: right;
    border-radius: 4px;
    position: relative;
    margin-bottom: 10px;
}

.mainMedia img
{
    width: 630px;
    height: auto;
    position: relative;
    border-top-left-radius: 3px;    
    border-top-right-radius: 3px;   
}

.about
{
    position: absolute;
    /*background-color: #000;*/
    overflow: hidden;
    height: 35px;
    position: absolute;
    top: 7px;
    left: 7px;
    font-size: 12px;
    color: rgb(94,118,171);
}

.about span
{
    color: #385874;
    font-size: 16px;
}

.story
{
    width: 630px;
    height: 300px;
    background-color: #fff;
    position: absolute;
    margin-left: 70px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    position: static;
    bottom: 0;
}

Answer 1

这是我对你想要实现的目标的看法：

我为你准备了fiddle here。

你需要做的是将故事div放在mainMedia div中。当你的css应该是“.Story”时，你也有你的css引用“.story”。

HTML：

    <div class="gigantic">
        <div class="main">
            <div class="twitterProfilePicture">
                <img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png">
            </div>

    <div class="push">
                <div class="mainMedia">
                        <img src="http://blog.sunsafaris.com/wp-content/uploads/2013/02/dune-king-lion.jpg"/>
                    <div class="about">
                            <p><span>Mashable</span></br>3 Hours ago</p>
                    </div>

            <div class="Story">
                        <div class="heading">Heading</div>
                        <div class="text">Text Story here</div>
                    </div>

        </div>
            </div>  

         </div>
    </div>

CSS：

body
{
    margin: 0;
    background-color: rgb(233,234,237);
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}

p
{
    margin: 0;
}

.gigantic
{
    width: 800px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px;
    margin-top: 40px;
    /*background-color: #fff;*/
}

.main
{
    width: 700px;
    height: 400px;
    /*background-color: #000;*/
    margin-right: auto;
    margin-left: auto;
    padding: 30px;
}

.twitterProfilePicture
{
    width: 55px;
    height: 55px;
    border-radius: 3px;
    /*background-color: #fff;*/
    position: relative;
    float: left;
}

.twitterProfilePicture img
{
    width: 55px;
    height: 55px;
    border-radius: 3px;
    /*background-color: #fff;*/
    position: relative;
    float: left;
}

.mainMedia
{
    width: 630px;
    height: auto;
    /*background-color: #fff;*/
    float: right;
    border-radius: 4px;
    position: relative;
    margin-bottom: 10px;
}

.mainMedia img
{
    width: 630px;
    height: auto;
    position: relative;
    border-top-left-radius: 3px;    
    border-top-right-radius: 3px;   
}

.about
{
    position: absolute;
    /*background-color: #000;*/
    overflow: hidden;
    height: 35px;
    position: absolute;
    top: 7px;
    left: 7px;
    font-size: 12px;
    color: rgb(94,118,171);
}

.about span
{
    color: #385874;
    font-size: 16px;
}

.Story
{
    background-color: black;
    opacity:0.5;
    position: absolute;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    position: absolute;
    bottom: 3px;
    color:white;
    width:630px; /*I made this the same as your mainMedia*/
}

我希望有所帮助。

将div放在另一个div上并使div保持在底部

1 个答案: