如何将图像文件放在左侧和文本在右侧 [英] How can I put image file on the left side and texts on the right side

问题描述

我想要能够在左侧放置图像，在右侧放置文本。
我如何做到这一点？如果图片太大，我如何调整它的大小？

I want to be able to put an image on the left side and texts on the right side. How can I do this? Also if the image is too big, how can I resize it?

.container {
  background: #34618c;
  border-radius: 25px;
}
h1 {
  font-family: consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
}
p {
  font-family: Consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
}

<img src="c:\users\user\Desktop\test.png" align="left">
<div class="container">
  <h1>Hello</h1>
  <p>World</p>
</div>

我在左侧获得一个图像，但我只想要围绕文本的边框不在图像周围。

I get an image on the left side but I only want the border around the text not around the image as well.

推荐答案

img {
  width : 20%;
}

.container{
background: #34618c;
border-radius: 25px;
width : 80%;
float : right;
}
h1{
 font-family: consolas;
border: 2px solid #73AD21;
border-radius: 25px;

}
p{
font-family: Consolas;
border: 2px solid #73AD21;
border-radius: 25px;

}

<img src="http://placehold.it/350x150">
<div class="container">
<h1>Hello</h1>
<p>World</p>
</div>

这样吗？

这篇关于如何将图像文件放在左侧和文本在右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！