使用瀏覽器調整大小，使用媒體查詢在圖像正下方堆疊文本

因此，我有一些文字位於頁腳區域內的圖像的下一個（右浮動）。當我將瀏覽器重新設置爲min-width:768px時。使用瀏覽器調整大小，使用媒體查詢在圖像正下方堆疊文本

我試圖讓文本和圖像都集中對齊，並與圖像位於文本上方，但我似乎無法做到這一點。發生的一切是，圖像縮小到一個點並且不重新對齊。

下面是一個例子，我想要實現的，和我的現有代碼：

enter image description here

HTML：

<div id="wrapper"> 
    <footer id="page_footer"> 
     <p>Thanks for visiting</p> 
     <a href="#" target="_blank"><img alt= 
     "nffc_logo" src="images/logo.png"></a> 
    </footer> 
</div><!-- wrapper -->

CSS：

#page_footer {  
    width: 100%; 
    height: auto; 
    position: absolute; 
    bottom:0;  /*sticky footer*/ 
    left: 0; 
    background: #282828; 
    color: white; 
} 
#page_footer img { 
    max-width: 3%; 
    height:auto;    
    margin: 5px; 
    float:right;        
}    
#page_footer p { 
    float:right; 
    margin-right: 10px; 
    margin-left: 1px;    
}

然後空媒體查詢：

@media screen and (min-width:768px) { }

來源

2013-12-23 imduncan

我添加一個額外的容器中的鏈接和段落，.right-div並使其float: right;，所以你不需要浮點數，兒童（p和a ）。它們只需要顯示爲內嵌塊，並且具有寬度或最大寬度以便更好地定位。

請注意，我申請樣式a，不img

因此，這裏是DEMO

來源

2013-12-23 16:46:40

文本很好，但是我使用的.png圖像基本上是一個點，並且無法識別，並且出現在文本的右側 – imduncan

也許您正在將樣式（例如max-width：3％）應用於標記？ –

改變您的標記的順序（顯示第一圖像和<p>後）解決了最簡單的形式問題：

<div id="wrapper"> 
    <footer id="page_footer"> 
    <a href="#" target="_blank"> 
    <img alt="nffc_logo" src="http://www.jonathanjeter.com/images/Square_200x200.png" /> 
    </a> 
    <p>Thanks for visiting</p> 
    </footer> 
</div> 
<!-- wrapper -->

...這裏是一個解決方案demo

CSS

@media screen and (max-width:768px) { 
    #page_footer { 
     width: 100%; 
     height: auto; 
     position: absolute; 
     bottom:0; 
     /*sticky footer*/ 
     left: 0; 
     background: #282828; 
     color: white; 
     text-align:center; 
    } 
    #page_footer img { 
     max-width: 3%; 
    } 
    #page_footer p { 
     margin:0 auto; 
    } 
} 
@media screen and (min-width:768px) { 
    #page_footer { 
     width: 100%; 
     height: auto; 
     position: absolute; 
     bottom:0; 
     /*sticky footer*/ 
     left: 0; 
     background: #282828; 
     color: white; 
     text-align:center; 
    } 
    #page_footer img { 
     max-width: 3%; 
     vertical-align:middle 
    } 
    #page_footer p { 
     display:inline-block; 
    } 
}

什麼和如何？對齊<p>旁邊的圖像使用display:inline-block;對齊方法。

將一個在另一個之上對齊，簡單margin會做。

來源

2013-12-23 18:32:21 NoobEditor

使用瀏覽器調整大小，使用媒體查詢在圖像正下方堆疊文本

回答

相關問題