[英]float divs inside container, text leaks out the bottom of the container, I want it inside the container.
[英]Keeping several Divs centered inside a container. Also Footer stuck in middle
我意識到這個問題在這里已經出現了幾次,但是我似乎找不到解決我特定問題的方法。 我目前正在建立一個攝影網站,盡管花了我很長時間,但它進展順利。 我通常不問太多問題,而是尋找答案,但這使我發瘋。 我是Web建設的新手,並認為自己是一個新手。
現在,我有一個主要的“照片”頁面,該頁面將鏈接到畫廊,在此頁面中,我將擁有較大的縮略圖,上面帶有一些精美的CSS3效果。
在此頁面中,我創建了6個div,其中將包含這些大縮略圖,我需要它們做的是在屏幕縮小時重新定位(或在較小的res顯示器上顯示等)。現在,img容器實際上在較小的屏幕上顯示時進行重新定位設備,但我正在努力實現的目標是將6個div保持在屏幕中央。
我嘗試的最后一個解決方案是“ display:inline-block”。此外,包含div的高度似乎不會隨內容擴展。 我想這里有些遺漏,因此不勝感激任何建議和幫助。
我還沒有深入研究頁腳問題,但是在此方面的任何幫助也將非常有用。 問題在於它只是位於頁面底部(我雖然很粘),但是現在頁面具有足夠的內容來滾動,因此只能停留在原處。
整個網站上的任何其他幫助和評論都非常歡迎:o)預先感謝!!
有問題的頁面russfrancis.co.uk/photo
請參閱以下標記和CSS:
照片標記:
<div class="photomain">
<div class="containerwrapper">
<div class="photoimgcontainer">
<div class="view view-second">
<img src="images/photo/tn/asialg.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Asia</h2>
<p>In 2008 I spent 6 months backpacking around Asia.</p>
<a href="asia.htm" class="info">View The Galleries</a>
</div> <!-- Content Close -->
</div> <!-- View-second close -->
</div> <!-- Img Container Close -->
<div class="photoimgcontainer">
</div>
<div class="photoimgcontainer">
</div>
<div class="photoimgcontainer">
</div>
<div class="photoimgcontainer">
</div>
<div class="photoimgcontainer">
</div>
</div> <!-- Container Wrapper Close -->
</div>
CSS:
.photomain{
width: 90%;
height:auto;
margin: 130px auto 0;}
.containerwrapper{
display:inline-block;
height:auto;}
.photoimgcontainer{
background-color:rgba(19,19,19,1);
width: 535px;
height: 360px;
float:left;
margin: 5px 5px;}
頁腳標記:
<footer>
<div class="footdiv">
<p align="center">Follow Me</p>
<div class="footimg">
<a href="https://www.facebook.com/RussFrancisPhotography" target="_blank"><img src="images/facebook.png" width="40" height="40" border="0" alt="RFP Facebook Page"></a>
<a href="http://www.flickr.com/photos/russfrancisphotography/" target="_blank"><img src="images/flickr.png" width="40" height="40" border="0" alt="Russ Francis Flickr"></a>
<a href="http://vimeo.com/lucidskies" target="_blank"><img src="images/vimeo.png" width="40" height="40" border="0" alt="Vimeo - Lucid Skies"></a>
<a href="https://twitter.com/R_F_Photo" target="_blank"><img src="images/twitter.png" width="40" height="40" border="0" alt="Russ Francis - Twitter"></a>
</div>
</div>
<p class="pleft">© Russ Francis Photography 2012</p>
<div class="pright"><a href="#">Contact Me</a></div>
</footer>
頁腳CSS:
footer {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFF;
position:absolute;
left: 0;
bottom: 0;
height: 115px;
width: 100%;}
.footdiv p {
padding-bottom: 10px;
border-bottom: 1px solid rgba(153,0,0,1);}
.footdiv {
margin: 0 auto 0;
width:200px;
height:60px;}
.footimg {
padding-left: 14px;}
.pleft {
padding-left: 10px;
color:#999;
font-size:12px;
float:left;}
.pright {
font-size:15px;
padding-right: 20px;
float:right;}
.pright a {
color:#FFF;
text-decoration:none;}
去除bottom: 0;
從頁腳將在底部
footer {
color: #FFFFFF;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
height: 115px;
left: 0;
position: absolute;
width: 100%;
}
和
.containerwrapper {
height: auto;
margin: 0 auto;
max-width: 1100px;
}
然后在<footer >
之前添加<div style="clear:both;"></div>
<footer >
輸出不考慮白線是因為存在拖曳圖像
在您的網站上嘗試從此處使用CSS,然后查看它是否對您有用 : http : //dabblet.com/gist/3739171 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.