媒體查詢將標題移動到圖像右側

我有一個網站需要根據屏幕大小移動h3的位置。媒體查詢將標題移動到圖像右側

的HTML是目前一個表是這樣的：

<table><tr><td><img src="someimage"></td><td><h3>Heading</h3></td></tr></table>

在較小的屏幕，我想的H3出現在圖像上面，與圖像全寬，所以我開始：

<div class="heading-image"> 
<h3>Heading</h3> 
<img="someimage"> 
</div>

這只是工作，但在更大的屏幕我想H3下降到圖像的右側，這將是在屏幕的50％：

.heading-image img { max-width: 50% }; 
.heading-image h3 { max-width: 50%; float:right };

現在h3會在右側的圖像旁邊下降。但是，它涉及垂直垂直012歲老問題集中div中的多行文本，其中div的高度是未知的（取決於圖像的大小和當前的屏幕寬度），以及長度文本是未知的（這些被輸入到CMS中）。

我已經嘗試了在互聯網上找到的各種方法，但我只是沒有得到我的頭。我試圖讓img和h3一個table-cell讓我回到我原來的方法，但我無法讓對齊工作。

enter image description here

來源

2014-01-20 Paul

你要垂直或水平居中對齊？ – Anup

@Anup對不起，我忽略了關鍵詞：垂直。 – Paul

@Paul：你想改變佈局取決於屏幕寬度....這聽起來像'媒體查詢'的東西... – NoobEditor

下面的代碼。只需在@ media-query中更改要摺疊的大小即可。

工作小提琴：http://jsfiddle.net/Hv6x3/

HTML

<div class="heading-image"> 
    <h3>Headline text goes here...</h3> 
    <img src="http://placeimg.com/640/480/tech" alt=""/> 
</div>

CSS

.heading-image img { 
    float: left; 
    max-width: 50%; 
    height: auto; 
} 
.heading-image h3 { 
    float: right; 
    width: 50%; 
    max-width: 50%; 
    text-align: left; 
} 

@media (max-width: 600px) { 
    .heading-image { 
     text-align: center; 
    } 
    .heading-image img { 
     float: none; 
     max-width: 100% 
    } 
    .heading-image h3 { 
     float: none; 
     max-width: 50%; 
    } 
}

來源

2014-01-20 07:13:21

謝謝喬 - 我想我的原始問題沒有提到「垂直對齊」的部分，這很愚蠢，因爲這是主要的事情。 – Paul

垂直對齊....使用display:table-cell

確保父格設置爲display:table

jsfiddle demo

html, body { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
@media only screen and (min-width : 600px) { 
    .heading-image { 
     width:100%; 
     height:100%; 
     margin:0; 
     padding:0; 
     text-align:center; 
     display: table; 
    } 
    .heading-image .img { 
     float:left; 
     height:100%; 
    } 
    .heading-image .h3 { 
     float:right; 
     display: table; 
     height:100%; 

    } 
    .heading-image .h3 h3 { 
     display: table-cell; 
     vertical-align: middle; 
     text-align: center; 
    } 
} 
@media only screen and (max-width : 600px) { 
    .heading-image { 
     width:100%; 
     margin:0; 
     padding:0; 
     text-align:center 
    } 
    .heading-image .img { 
     width: 100%; 
    } 
    .heading-image .img img { 
     width:auto; 
     height:auto; 
    } 
    .heading-image .h3 { 
     width: 100%; 
     vertical-align:middle; 
    } 
}

來源

2014-01-20 07:16:09 NoobEditor

媒體查詢將標題移動到圖像右側

回答

相關問題