0

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

当我尝试这样做时，故事 div 会排到顶部，因为 mainMedia 潜水是 position:absolute 但我必须保持它以保持 about 潜水在它之上......有什么想法吗？

能否请你帮忙？

非常感谢！

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

1 回答 1

0

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

我在这里为你放了一把小提琴。

您需要做的是将故事 div 粘贴到 mainMedia div 中。当它应该是“.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*/
}

我希望这会有所帮助。

于 2013-03-08T23:34:41.560 回答