我想<div>
在网站底部找到“版权” 。当我尝试在容器中放入两个<div>
(id="div0"
和id="copyright"
)时,<div>
它不起作用。
现在,这让我感到困惑,因为我认为a<div>
自然是一个块元素,因此在之间div0
和之间copyright
自然会有换行符,并且copyright
将位于旁边div0
!
我不知道我做错了什么。我只使用HTML和CSS。
这是我的演示。
您遇到的问题类似于jQueryUI滑块:绝对定位的元素和父容器的高度,因为容器id="div0"
不会增长以包含子元素。你可以看到这一点,如果你右键点击→检查了<div id="dev0">
在Chrome中看到height = 0px
。
position:absolute
将元素从正常流中移出,这意味着它不会在元素正常应留的位置留下空隙。
版权<div>
在顶部显示,因为前一个<div>
没有高度,因为它实际上并不包含任何图像(它们都超出了正常流程)。
解决此问题的一种(快速)方法是将高度简单地添加到<div id="dev0">
。
您可能会认为使用其他位置值会起作用,position:relative
但确实会在元素通常应留的位置留出空隙。但是,您不能在示例中使用此选项,因为所有图像的正常位置是彼此相邻的,因此仍然会遇到相同的容器高度问题。
另一种方法是将3张图片左右浮动。这也存在相同的问题,因为float元素也不正常流动,但是有许多CSS方法可将父元素配置为正确包含float子元素,例如CSSclear
属性。
在以下示例中,我选择了overflow:hidden
(请参见http://colinaarts.com/articles/the-magic-of-overflow-hidden/)使父级正确包含子级-请参见demo。
的CSS
我还删除了很多重复文件,并选择了visibility:hidden
而visibility:visible
不是更改z-index
。
body {
background-color: #5C5C3D;
}
#main {
position: relative;
width: 1366px;
margin: 0 auto;
background-color: #292929;
overflow: hidden;
}
#leftColumn {
float:left;
}
#rightColumn {
float: right;
}
#leftColumn, #rightColumn {
padding:20px 10px 0 10px;
}
#leftColumn img, #rightColumn img {
display:block;
margin-bottom:20px;
}
#img1, #img2, #img3, #img4, #img5, #img6 {
width: 253px;
height: 190px;
}
#imgCenter1, #imgCenter2, #imgCenter3, #imgCenter4, #imgCenter5, #imgCenter6 {
position: absolute;
top: 20px;
left: 278px;
width: 810px;
height: 610px;
visibility: hidden;
}
#img1:hover ~ #imgCenter1, #img2:hover ~ #imgCenter2, #img3:hover ~ #imgCenter3, #img4:hover ~ #imgCenter4, #img5:hover ~ #imgCenter5, #img6:hover ~ #imgCenter6 {
visibility: visible;
}
#copyright{
position: relative;
margin:0 auto;
max-width: 1000px;
border: 2px solid white;
padding-top: 15px;
padding-bottom: 15px;
color:white;
background-color: #5C5C3D;
font-family: tahoma;
font-size: 0.8em;
}
的HTML
<div id="main">
<div id="leftColumn">
<img id="img1" src="http://images2.wikia.nocookie.net/__cb20110205230838/pixar/images/thumb/1/1f/Pixar_Animation_Studios_2.jpg/800px-Pixar_Animation_Studios_2.jpg"/>
<img id="img2" src="http://www.jjtoy.com/wallpaper/original/Doc_Martin___Pixar_Cars_by_GrangerDesign.jpg"/>
<img id="img3" src="http://fc05.deviantart.net/fs49/f/2009/188/9/f/Rowdy_McQueen___Pixar_Cars_by_GrangerDesign.jpg"/>
<img id="imgCenter1" src="http://images2.wikia.nocookie.net/__cb20110205230838/pixar/images/thumb/1/1f/Pixar_Animation_Studios_2.jpg/800px-Pixar_Animation_Studios_2.jpg">
<img id="imgCenter2" src="http://www.jjtoy.com/wallpaper/original/Doc_Martin___Pixar_Cars_by_GrangerDesign.jpg">
<img id="imgCenter3" src="http://fc05.deviantart.net/fs49/f/2009/188/9/f/Rowdy_McQueen___Pixar_Cars_by_GrangerDesign.jpg">
</div>
<div id="rightColumn">
<img id="img4" src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/MonstersIncForTheBirdsWallpaper800.jpg"/>
<img id="img5" src="http://www.wallmay.net/thumbnails/detail/20120814/cartoons%20pixar%20disney%20company%20movies%20animated%20toy%20story%201600x1200%20wallpaper_www.wallmay.com_62.jpg"/>
<img id="img6" src="http://fc09.deviantart.net/fs26/i/2008/143/3/6/Wall_E_Jr____Pixar___iBook_by_iFab.jpg"/>
<img id="imgCenter4" src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/MonstersIncForTheBirdsWallpaper800.jpg">
<img id="imgCenter5" src="http://www.wallmay.net/thumbnails/detail/20120814/cartoons%20pixar%20disney%20company%20movies%20animated%20toy%20story%201600x1200%20wallpaper_www.wallmay.com_62.jpg">
<img id="imgCenter6" src="http://fc09.deviantart.net/fs26/i/2008/143/3/6/Wall_E_Jr____Pixar___iBook_by_iFab.jpg">
</div>
</div>
<div id="copyright">
<center>CSS 1st Homework</center>
<center>©2013 by TS7<sup>TM</sup> from NEWBIESVN Team. All rights reserved.</center>
</div>
此外,<center>
已弃用,因此如果您有时间,我将研究一种CSS方式来使文本居中。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句