0

タイトルが中央に配置されているHTMLページにヘッダー（h1）があります。ポートレートモードでは、画像をそのタイトルの上に配置できます。向きを横向きに変更する場合は、画像をタイトルの左側に配置する必要があります。

<br>@media画面やさまざまな設定と組み合わせてみましたが、(orientation:portrait/landscape) 何の進展もありませんでした。フロート左を使用した場合、画像はタイトルなどの上の行にとどまります。実際にそれを解決する方法がわかりません。

<!DOCTYPE HTML> 
<html> 
<body> 
<h1><img>"picture"</img><br>Car</h1> 
</body> 
</html>

誰か提案はありますか？

4

1 に答える 1

1

このコードがお役に立てば幸いです。

html コード

<h1><img src="img.jpg" /> <span>Call</span></h1>

通常表示用の CSS コード

h1{
    text-align:center;
}
h1 img{
    display:inline;
}
h1 span{
    display:block;
}

横向きビューの CSS コード

h1 span{
    display:inline;
    background-color:#3CF;
    position:relative;
    top:-25px;
}

画像の高さに応じて上部の位置を調整します。

于 2012-11-06T19:19:58.247 に答える