我的任务是制作一个与图片中完全相同的结构。但是文字和图片好像不能听我的。我尝试过对齐、 float 、宽度和其他属性,但它们似乎都不起作用。有趣的是我不能那样做,因为它很简单。你能帮帮我吗?
/* Make changes anywhere you need in CSS. Create CSS pseudo-elements if you need them. */
.box {
border: 5px solid #000;
border-radius: 5px;
max-width: 500px;
}
.box__image {
border-radius: 20px;
padding:21px;
float: left;
}
.box__text{
}
.box__wrapper {
}
.box__title {
font-weight: 700;
margin: 0 0 10px 0;
}
.box__link {
text-decoration: underline;
color: black;
font-weight: bold;
text-transform: capitalize;
}
<section class="task">
<div class="task__holder">
<div class="box">
<img class="box__image" src="https://dbcms.s3.amazonaws.com/devbridgecom/bcms/image/cdb81346f5ec4f708a53c58c48dbb288/knight-king-small.png" alt="#">
<div class="box__wrapper">
<h2 class="box__title">The Night King</h2>
<p class="box__text">The Night King was created by the Children of the Forest during the Wars of the First Men and the Children of the Forest and remained alive for about 10,000 years. It can be assumed the magic that transformed him also gave him his longevity.</p>
<p class="box__text">
The Night King was the master and the first of the <a href="#" class="box__link">white walkers</a>, having existed since the age of the First Men. He was also the supreme leader of the Army of the Dead.
</p>
</div>
</div>
</div>
</section>
最佳答案
让我们使用 flex
布局。
我总是喜欢使用 flex box 布局,它太棒了。
<强>1。最佳解决方案。
盒子类使用display: flex;
,并为图像添加容器类。
.box {
border: 5px solid #000;
border-radius: 5px;
max-width: 500px;
display: flex;
}
.box__image {
border-radius: 20px;
padding: 21px;
float: left;
}
.box__text {}
.box__wrapper {}
.box__title {
font-weight: 700;
margin: 0 0 10px 0;
}
.box__link {
text-decoration: underline;
color: black;
font-weight: bold;
text-transform: capitalize;
}
<section class="task">
<div class="task__holder">
<div class="box">
<div class="image-container">
<img class="box__image"
src="https://dbcms.s3.amazonaws.com/devbridgecom/bcms/image/cdb81346f5ec4f708a53c58c48dbb288/knight-king-small.png"
alt="#">
</div>
<div class="box__wrapper">
<h2 class="box__title">The Night King</h2>
<p class="box__text">The Night King was created by the Children of the Forest during the Wars of the
First Men and the Children of the Forest and remained alive for about 10,000 years. It can be
assumed the magic that transformed him also gave him his longevity.</p>
<p class="box__text">
The Night King was the master and the first of the <a href="#" class="box__link">white
walkers</a>, having existed since the age of the First Men. He was also the supreme leader
of the Army of the Dead.
</p>
</div>
</div>
</div>
</section>
<强>2。不更改模板的解决方案。
对盒子类使用display: flex;
,对box__image
类添加align-self: baseline;
.box {
border: 5px solid #000;
border-radius: 5px;
max-width: 500px;
display: flex;
}
.box__image {
border-radius: 20px;
padding: 21px;
float: left;
align-self: baseline;
}
.box__text {}
.box__wrapper {}
.box__title {
font-weight: 700;
margin: 0 0 10px 0;
}
.box__link {
text-decoration: underline;
color: black;
font-weight: bold;
text-transform: capitalize;
}
<section class="task">
<div class="task__holder">
<div class="box">
<img class="box__image"
src="https://dbcms.s3.amazonaws.com/devbridgecom/bcms/image/cdb81346f5ec4f708a53c58c48dbb288/knight-king-small.png"
alt="#">
<div class="box__wrapper">
<h2 class="box__title">The Night King</h2>
<p class="box__text">The Night King was created by the Children of the Forest during the Wars of the
First Men and the Children of the Forest and remained alive for about 10,000 years. It can be
assumed the magic that transformed him also gave him his longevity.</p>
<p class="box__text">
The Night King was the master and the first of the <a href="#" class="box__link">white
walkers</a>, having existed since the age of the First Men. He was also the supreme leader
of the Army of the Dead.
</p>
</div>
</div>
</div>
</section>
关于html - 如何仅更改css将图片左对齐和文本右对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58117967/