CSS中如何实现窗口变小，图片换行且变大？

html-css08

CSS中如何实现窗口变小，图片换行且变大？,第1张

你好，这个需要使用媒体查询来实现。

.gridContainer {

margin-left: auto

margin-right: auto

width: 86.45%

}

.img { width:50%}

@media only screen and (min-width: 481px) {

.gridContainer {

width: 90.675%

padding-left: 1.1625%

padding-right: 1.1625%

}

.img { width:60%}

}

@media only screen and (min-width: 769px) {

gridContainer {

width: 88.5%

max-width: 1232px

}

.img { width:80%}

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

">

<html xmlns="

http://www.w3.org/1999/xhtml

">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>css如何使图片和文字在同一行显示,文字换行后和图片对齐</title>

<style>

div { width:400px margin:0 auto}

img { float:left margin:0 10px 10px 0}

p { width:auto}

</style>

</head>

<body>

<div>

<img src="img.jpg" width="200" />

<p>css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐css如何使图片和文字在同一行显示,文字换行后和图片对齐</p>

</div>

</body>

</html>

效果图是这样的。注意：img要有“float:left”或“float:right”；p一定要设置“width:auto”