Question

我想制作一个“关于我”页面，其中包含一个带有细边框的框，固定在页面中央。

我需要在框的左半部分添加一些文本，并在框的右侧添加一个图像。

我很难用<div>来做到这一点，但这根本无法按照我想要的方式工作。我该如何解决这个问题。

到目前为止，您可以在下面看到我的代码：

<div style="background-color: white;
     border: 5px solid #3D65A9;
     padding: 50px;
     margin: 20px;">

     <h4 style="text-align: left; 
                font-family:'Cinzel'; 
                white-space:pre-line; 
                margin-left: 10px;
                display: inline-block">Hi everyone!!Random text.
     </h4>
     <img src="Moja-slika.jpg" alt="Moja slika" style="width:30%">
</div>

这就是我得到的，我希望我的文字在顶部，而不是底部。我想使图像和整个图像变小。

Answer 1

如果图像是float:left;元素的子元素，则可以<h4></h4>，如下所示：

<div style="background-color: white;
  border: 5px solid #3D65A9;
  padding: 50px;
  margin: 20px;">
<h4 style="text-align: left; font-family:'Cinzel'; white-space:pre-line; margine-left: 10px;display: inline-block">
  <img src="Moja-slika.jpg" alt="Moja slika" style="width:30%; float:left;"> Hi everyone!!
Random text.</h4>

</div>

但是，清除浮动内容是一个好习惯，有关更多信息，请参见此link。

Answer 2

只需添加vertical-align

<div style="background-color: white;
  border: 5px solid #3D65A9;
  padding: 50px;
  margin: 20px;">
  <img src="http://2.bp.blogspot.com/-itYtAL5lBeE/TkFdlIhhacI/AAAAAAAABHI/HYGHzdl85UI/s1600/111433_aerogenerador.jpg" alt="Moja slika" style="width:30%">
<h4 style="vertical-align: top; text-align: left; font-family:'Cinzel'; white-space:pre-line; margine-left: 10px;display: inline-block">Hi everyone!!
Random text.</h4>

</div>

Answer 3

<div style="background-color: white; border: 5px solid #3D65A9; padding: 50px; 
  margin: 20px;">
     <h4 style="text-align: left; font-family:'Cinzel'; white-space:pre-line; 
      margine-left: 10px;display: inline-block; float:right">
        Hi everyone!! Random text.
     </h4>
   <img src="Moja-slika.jpg" alt="Moja slika" style="float:left" width="100" height="100">
 </div>

这应该使该段落位于顶部。然后，您可以使用边距将其居中。要缩小图像，请添加height和width属性并将值设置为所需的大小。

Answer 4

您可以在h4标签中使用绝对位置：

     <div
      style="background-color: white;
  border: 5px solid #3D65A9;
  padding: 50px;
  margin: 20px;position: relative;"
    >
    <img src="img/amorgos.webp" alt="Moja slika" style="width:30%" />

      <h4
        style="text-align: left; font-family:'Cinzel'; white-space:pre-line;display: inline-block;position: absolute;
        top: 29px;
        margin: 0;"
      >
        Hi everyone!! Random text.
      </h4>
    </div>

Answer 5

在此代码段中，您可以看到所需布局的示例。

img应该有一个将其包装的div。
请勿放置内联样式。而是使用类。
我向您推荐关于layout的这个有趣的网站
接下来，学习flexbox

.about__wrapper {
	background-color: white;
	border: 5px solid #3D65A9;
	width: 400px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	padding: 10px;
}

.about__image--wrapper {
	width: 25%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.about__image {
	width: 100%;
	height: auto;
}

.about__text {
	width: 65%;
}

<div class="about__wrapper">
	<div class="about__image--wrapper">
		<img
			class="about__image"
			src="https://place-hold.it/100x100.jpg"
			alt="image-name" />
	</div>
	<div class="about__text">
		Random text Random text Random text Random text Random text Random text Random text 
	</div>
</div>

“关于我”页面，文本和图片并排在一个带边框的框中

5 个答案: