使影像與填充中的段落文本對齊

這就是它的樣子，箭頭顯示了我希望影像在哪里。

我的html代碼

   <section class="box2">
        <h1 class="underline"><b>Husk dit helbred!</b></h1> 
        <p>Projekt arbejde er vigtigt, men ikke lige s? vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held og lykke med jeres mange fremtide projekter!</p> 
    <img src="images/emilybillede.jpg" alt="">

我的 CSS 代碼

.underline {
    text-decoration: underline;
}

    .box2 img{
      position: right;
    width: 200px;
    height: 200px;
  }

    .box2 {
      margin: 0 auto;
      margin-right: 20%;
      margin-left: 20%;
        margin-top: 20px;
        background-color: rgb(255, 255, 255);
        padding: 15px;
        height: 50%;
      
    }

    p {
      width: 300px;
    }

我也嘗試過浮動，但這會將它從填充中取出。 我也試過垂直對齊

uj5u.com熱心網友回復：

您可以通過多種方式實作它，例如使用浮動、彈性或位置。這里有一個浮動的例子

.underline {
  text-decoration: underline;
  clear: both;
}

.box2 img {
  float: right;
}

.box2 {
  width: 100%;
}

p {
  width: 300px;
  float: left;
}

<section class="box2">
  <h1 class="underline"><b>Husk dit helbred!</b></h1>
  <p>Projekt arbejde er vigtigt, men ikke lige s? vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
    og lykke med jeres mange fremtide projekter!</p>
  <img src="https://www.filterforge.com/more/help/images/size200.jpg" alt="">
</section>

uj5u.com熱心網友回復：

對于浮動，檔案順序必須顛倒。如果您不喜歡這樣，請考慮使用 flexbox 代替，段落和影像是 flex 行中的子項。

這里展示了兩個選項。

.underline {
  text-decoration: underline;
}

.box2 img {
  width: 200px;
  height: 200px;
  margin-left: 10px;
}

img.float-right {
  float: right;
}

.box2 {
  margin: 0 auto;
  margin-right: 20%;
  margin-left: 20%;
  margin-top: 20px;
  background-color: rgb(255, 255, 255);
  padding: 15px;
  height: 50%;
}

p.sized {
  width: 300px;
}

.flex-row {
  display: flex;
}

.flex-row p:first-child {
  margin-top: 0;
}

<section class="box2">
  <h1 class="underline"><b>Husk dit helbred!</b></h1>

  <img src="https://via.placeholder.com/200" alt="" class="float-right">

  <p class="sized">Projekt arbejde er vigtigt, men ikke lige s? vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
    og lykke med jeres mange fremtide projekter!</p>
</section>

<section class="box2">
  <h1 class="underline"><b>Husk dit helbred!</b></h1>

  <div class="flex-row">
    <p>Projekt arbejde er vigtigt, men ikke lige s? vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig,
      held og lykke med jeres mange fremtide projekter!</p>

    <img src="https://via.placeholder.com/200" alt="">
  </div>
</section>

uj5u.com熱心網友回復：

您可以在子項的父項上使用 (flexbox)，然后使用 (justify-content: space between)，如下例所示：

.underline {
  text-decoration: underline;
}

.box2 img {
  position: right;
  width: 200px;
  height: 200px;
}

.box2 {
  margin: 0 auto;
  margin-right: 20%;
  margin-left: 20%;
  margin-top: 20px;
  background-color: rgb(255, 255, 255);
  padding: 15px;
  height: 50%;
  display:flex;
  justify-content: space-between;
}

p {
  width: 300px;
}

<section class="box2">
  <div>
  <h1 class="underline"><b>Husk dit helbred!</b></h1>

  <p>Projekt arbejde er vigtigt, men ikke lige s? vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
    og lykke med jeres mange fremtide projekter!</p>
  </div>

  <img src="https://via.placeholder.com/200" alt="">
</section>

uj5u.com熱心網友回復：

使用浮動，而不是位置。使用這個 CSS。我希望它會幫助你。

 .underline {
  text-decoration: underline;
}

.box2 img {
  float: right;
  width: 200px;
  height: 200px;
}

.box2 {
  margin: 0 auto;
  margin-right: 20%;
  margin-left: 20%;
  margin-top: 20px;
  background-color: rgb(255, 255, 255);
  padding: 15px;
  height: 50%;
}

p {
  width: 300px;
  float: left;
}

uj5u.com熱心網友回復：

.underline {
  text-decoration: underline;
  grid-column: 1/3;
  grid-row: 1/2;
}

.box2 img {
  width: 200px;
  height: 200px;
  grid-column: 2/3;
  grid-row: 2/3;
}

.box2 {
  margin: 20px 20%;
  background-color: rgb(255, 255, 255);
  padding: 15px;
  display: grid;
  grid-template-columns: min(1fr, 300px) 1fr;
  grid-template-rows: min-content min-content;
  gap: 15px;
  box-shadow: 0 0 100px rgba(0, 0, 0, .1);
}

p {
  text-indent: 2em;
  margin: 0;
  grid-column: 1/2;
  grid-row: 2/3;
}

<section class="box2">
  <h1 class="underline"><b>Husk dit helbred!</b></h1>

  <p>Projekt arbejde er vigtigt, men ikke lige s? vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
    og lykke med jeres mange fremtide projekter!</p>

  <img src="https://via.placeholder.com/100" alt="">
</section>

標籤：htmlcss图片文本垂直对齐

上一篇：錯誤CS1519（無效令牌“;”）和CS1001（需要識別符號）。矢量3問題（Brakeys多人游戲教程ep2）

下一篇：怎么把邊框放在圖片里面