html - 如何仅更改css将图片左对齐和文本右对齐

Question

我的任务是制作一个与图片中完全相同的结构。但是文字和图片好像不能听我的。我尝试过对齐、 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>

Answer 1

让我们使用 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>