Question

我有这个页面：

http://test.dac-proiect.ro/landing-page/index.html

我希望我的图像（蓝色圆圈）启动，如下图所示

http://i57.tinypic.com/osxyll.jpg

这是代码HTML：

            <div class="content">

            <div class="container-video">
                 <div class="text-sus">
                            <p>Set us perspiciatis</p>
                            <p>unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore <p>
                 </div>

                            <div class="video">

                            <img src="images/VIDEO.png" style="width:100%;height:auto;">


                            </div>
            </div>
                    <div class="imagine1"><img src="images/CERC-ALBASTRU.png" style="width:100%;height:auto;float:left;"></div>


            </div>

这是代码CSS：

    .text-sus
{
width:50%;
margin:0 auto;
}

.text-sus p:first-child
{
text-align:center;
margin:0;
}

.video{
width:50%;
margin:0 auto;
}

.content
{
/*background:url(images/CERC-ALBASTRU.png);*/
width:100%;
height:1000px;
margin:0 auto;
background-repeat:no-repeat;
}

.container-video{
width:100%;
height:auto;
background:url(images/BODY-VERDE.png);
margin:0 auto;
overflow:auto;
}

我希望我设法解释我的问题iara重绘一些我会带回来的更多细节。

我试着这样做：

.imagine1 img{position:absolute;top:257px;z-index:-1}

轻松编写我的分辨率代码，但仅在其他分辨率上正常

Answer 1

首先，你应该缩进一下你的代码，以便更好地了解你的骨架。试试这个：

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>


<body>
    <div class="container">
        <div class="container-header">
            <div id="c1">
                <img src="images/APARAT-BANNER.png" style="width:100%;height:auto;">
            </div>
            <div id="c2">
                <p>Come on our both</p>
            </div>
            <div id="c3">   
                <img src="https://cloud04.nsh.ro:2083/cpsess6991769065/viewer/home%2fdacproie%2fpublic_html%2ftest%2flanding-page%2fimages/pachete.png" style="width:100%;height:auto;">
            </div>
        </div>
    </div>
    <div class="imagine1">
        <img src="images/CERC-ALBASTRU.png" style="width:100%;height:auto;">
    </div>
    <div class="content">
        <div class="container-video">
            <div class="text-sus">
                <p>Set us perspiciatis</p>
                <p>unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore </p><p>
                </p>
            </div>
            <div class="video">         
                <img src="images/VIDEO.png" style="width:100%;height:auto;">
            </div>
        </div>
    </div>
</body>

这是放置它的方式，而不添加更多CSS;思想。如果不是你在寻找，抱歉D：

Answer 2

你必须将文本和视频放在一个绝对的div中。

body
{
margin:0;
}

.container{
width:100%;
/*height:100%;*/
background:white;
}

.container-header{
width:70%;
height:auto;

margin:0 auto;
overflow:auto;
}

.container-video{
width:100%;
height:auto;
background:url(http://test.dac-proiect.ro/landing-page/images/BODY-VERDE.png);
margin:0 auto;
overflow:auto;
}

#c1{height:auto;float:left; }
#c2{height:auto;float:left;background:antiquewhite }
#c3{height:auto;float:left; }



.text-sus
{
width:50%;
margin:0 auto;
}

.text-sus p:first-child
{
text-align:center;
margin:0;
}

.video{
width:50%;
margin:0 auto;
}

.content
{
/*background:url(images/CERC-ALBASTRU.png);*/
width:100%;
height:1000px;
margin:0 auto;
background-repeat:no-repeat;
}


#c1, #c2, #c3 {
    width: 33%; // 1/3 of 100%
	
}

  <div class="container">
            <div class="container-header">
                <div id="c1"><img src="http://test.dac-proiect.ro/landing-page/images/APARAT-BANNER.png" style="width:100%;height:auto;"></div>
                <div id="c2">
                    <p>Come on our both</p>
                </div>
                <div id="c3">
                    <img src="http://test.dac-proiect.ro/landing-page/images/pachete.png" style="width:100%;height:auto;">
                </div>
            </div>
        </div>

        <div class="content">
            <div class="container-video" style="position:relative;">
                <div style="position:absolute;right:0;top:0;width:100%;">
                    <div class="text-sus">
                        <p>Set us perspiciatis</p>
                        <p>unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore </p><p>
                        </p></div>

                    <div class="video">
                        <img src="http://test.dac-proiect.ro/landing-page/images/VIDEO.png" style="width:100%;height:auto;">
                    </div>
                </div>
                <div class="imagine1"><img src="http://test.dac-proiect.ro/landing-page/images/CERC-ALBASTRU.png" style="width:100%;height:auto;float:left;"></div>
            </div>
        </div>

如何将此图片设置为显示在上方？

2 个答案: