jquery - 使用方向检测来确定图像的位置

Question

我在标题居中的 HTML 页面上有一个标题（h1）。纵向模式允许图像位于该标题上方，并且我希望图像在将方向更改为横向时位于标题的左侧。

我尝试与<br>@media screen(orientation:portrait/landscape) 和不同的设置结合使用，但没有任何进展。如果我使用左浮动图像仍然停留在标题等上方的行上。我真的不知道如何解决它..

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

有没有人有什么建议？

score 1 · Accepted Answer

希望这段代码对您有所帮助。

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;
}

根据您的图像高度调整顶部位置。

1 回答 1