@media screen 调整图片和文本左右浮动
时间: 2023-12-23 22:25:58 浏览: 121
@media screen可以用于根据屏幕大小和设备类型来调整网页的样式。下面是一个例子,演示如何使用@media screen来调整图片和文本的左右浮动:
```html
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
margin-right: 20px;
}
@media screen and (max-width: 600px) {
img {
float: none;
margin-right: 0;
}
}
</style>
</head>
<body>
<h2>Floating Images</h2>
<p><img src="img_fjords.jpg" alt="Trolltunga Norway" style="width:170px;height:170px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
<p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.</p>
</body>
</html>
```
在这个例子中,当屏幕宽度小于或等于600像素时,图片将不再左浮动,而是显示在文本的上方。这是通过@media screen和max-width属性来实现的。
阅读全文