Question

我想显示一个图像，当全屏显示右侧的信息时，但当您调整屏幕大小时，信息会移动到图像下方。我该怎么做？

<div class="container">

<h1>LandScape</h1>
    <div class="content">
        <div id="item">
        <img src="#">
        <h3>Ferrari LaFerrari<span>car info</span></h3>
        <ul class="info">
            <li><h4><i class="icon icon camera">Canon Powershot S95</h4></li>
            <li>22.5 MM</li>
            <li>f/5.6</li>
            <li>1/1000</li>
            <li>80</li>
        </ul>
        </div>
    </div>


</div>

Answer 1

如果没有更具体的数据，我只能给你一般的要点 1）

display:inline-block

- ＆GT;图像和信息连续和2）媒体查询如下：

@media screen and (max-width: 300px){
...
}

见这里： https://jsfiddle.net/svArtist/wofseL6z/

调整屏幕大小时如何在图像下移动信息？仅使用css

1 个答案: