Question

我创建了这个页面，我希望看到#showcase包含#banner在顶部，而由{Table}组成的div #main位于刚触及横幅的下方#banner。

CSS：

#bcontainer{display:block;
position:absolute;
width:100%;
}
#showcase{
margin-top: 0;
position:absolute;
float:left;
clear:both;
height:200px;
width:100%;
valign:middle;
}
.image { 
position: relative;  
width:100%;
height:100%;
z-index:-4;
}
#bannerText { 
position: absolute; 
top: 50px;
float:right;  
width:100%; 
color:cyan;
}
#Text{
float:right;
margin-right:20px;
font-size:20px;}

#banner{
height:100%;
width:100%;
}
#main{
width:100%;
clear:both;
display:block;
position:relative;
valign:middle;

}
.fb-follow{
float:right;}
footer{
display:inline-block;
background:#141823;
}

HTML：

<body><div id="bcontainer">
<div id="showcase"><div class="image"><img id="banner" alt=""  

src="file:///C:\Users\Raj\Desktop\Shashwat\images\mrx.jpg">
    <div id="bannerText"><span id="Text">Singing Sensation of Doon :Shashwat    `J Pandit</span></div>
</div>
    </div>
    <div id="main" >
            <table>
            <thead><tr><th colspan="2">My Youtube Videos<th><tr></thead>
            <tbody>
                <tr><td><iframe width="420" height="315"
src="https://www.youtube.com/watch?v=I4mfvaazBxQ">

</iframe></td><td><iframe width="420" height="315"
src="https://www.youtube.com/watch?v=qjTgYgFDDFM">
</iframe></td></tr>
                    <tr><td><iframe width="420" height="315"
src="https://www.youtube.com/watch?v=tEMy0L5_a-Y">
</iframe></td><td><iframe width="420" height="315"
src="https://www.youtube.com/watch?v=6mNoiI_7pE4">
</iframe></td></tr>
                    <tr><td><iframe width="420" height="315"
src="https://www.youtube.com/watch?v=9l_kRa4fwPY">
</iframe></td><td><iframe width="420" height="315"
src="https://www.youtube.com/watch?v=7qtNr3DqVqE">
</iframe></td></tr>
                </tbody>
            </table>                
    </div>
    </body>

Answer 1

基本上你的问题是由于过度使用定位属性而实际上你很少需要它，所以需要重构你的html / css所以对于css：

#showcase {
    height:200px;
    width:100%;
    background: url("file:///C:\Users\Raj\Desktop\Shashwat\images\mrx.jpg");
}
#Text {
    margin-top: 50px;
    text-align:right;
    margin-right:20px;
    font-size:20px;
    color: cyan;
}
#main {
    width: 900px;
    margin: 0 auto;
}
.fb-follow {
    float:right;
}
footer {
    display:inline-block;
    background:#141823;
}

在您的html中，您可以使用以下代码替换桌面前的所有内容，因为您认为它比原始内容更简洁：

<div id="showcase">
    <h1 id="Text">
        Singing Sensation of Doon : Shashwat J Pandit
    </h1>
</div>

这是更新的fiddle

关于您使用CSS columns展示视频的表格会更简洁。

Divs重叠在一起

1 个答案: