新手问题:我想把一张照片放在网站的右边，文字环绕在左边，并在照片下直接有摄影师的信用
片名显示在左侧文字标题上方，而不是右侧照片下方。
这是我的html:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<link rel='stylesheet' href='test.css'/>
</head>
<body>
<picture>
<img class='pic' src='imagesstr_pic1.JPG' alt="Person in blue shirt" />
<figcaption class='pic'>Photo Credit: Photographer</figcaption>
</picture>
<div>
<h2>Title</h2>
<p>Text text text etc. this is the text body</p>
</div>
</body>
</html>
.page {
font-size: 100%;
background-color: #777;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.pic {
width: 35%;
float: right;
margin-left: 20px;
}
我试着把图片和信用放在div框&使用:
.pic-box {
display: flex;
flex-direction: column;
}
。
第一次在这里提问，请让我知道我是否可以改进!
我相信这就是你想要的。我把你的<picture>和figcaption换成了div。div很容易使用。然后我给了包装div(以前是<picture>的picwrap类，然后给了以前的figcaptiondiv一个piccap类，只是为了使它与pic的图片不同。
然后我把这个添加到你的CSS:
.picwrap {
float: right;
text-align: center;
}
.pic {
max-width: 35vw;
}
这是一个工作的例子，我添加了一张图片，并给了它更多的文字，这样你就可以看到换行了。
.page {
font-size: 100%;
background-color: #777;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.picwrap {
float: right;
text-align: center;
}
.pic {
max-width: 35vw;
}<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<link rel='stylesheet' href='test.css'/>
</head>
<body>
<div class="picwrap">
<img class='pic' src='https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F3.bp.blogspot.com%2F-h0-QmJgoc0A%2FUynUaTP3h1I%2FAAAAAAAACOI%2FrmJPmSiM388%2Fs1600%2Fjavanes2.jpg&f=1&nofb=1&ipt=2d9c6496df9f3008cb82378322a186661b08e10918f56fd1458cf7d8db784cfe&ipo=images' alt="Person in blue shirt" />
<div class='piccap'>Photo Credit: Photographer</div>
</div>
<div>
<h2>Title</h2>
<p>Text text text etc. this is the text body Text text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text body</p>
</div>
</body>
</html>请按如下方式编辑您的.pic我觉得这就是你想要的!
.pic {
width: 35%;
float: center;
margin-left: 20px;
}