文字向左浮動，圖片向右浮動

圖片

正如您在圖片中看到的，我希望圖片位于文本塊的右側。我已經閱讀了這篇文章，除了我的代碼不同。

<section>               
   <img src="images/default-image.png" />
   <h2>Lorem Ipsum</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
 </section>

在那個答案中，twentydot 正在使用div's，而當我嘗試使用 twentydot 的代碼時，頁面看起來一團糟。

我該如何解決這個問題？謝謝！

uj5u.com熱心網友回復：

使用display: flex屬性section并將h2 p標簽放在單獨的標簽中。也只需將img元素放在元素下方，h2 p如代碼段所示。

你可以在這里閱讀更多關于 display: flex

section {
  display: flex
}
.imgTag{
width:50vw;
height:50vh
}

<section class="post-container">
  <span>
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum
    mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</span>

  <img src="https://pixy.org/src/477/4774988.jpg" class="imgTag" />
</section>

更新：

當用戶需要自己的代碼中一些幫助
，如果你想影像要大像增加用于文本一些喘息的區域width的section在這里完成的（1000px）。此外，以中心用它display: block與margin: auto

@import url("https://fonts.googleapis.com/css2?family=Yomogi&family=Zen Kaku Gothic New:wght@300;400;500&display=swap");
:root {
  --white: #fff;
  --dark-grey: #2f3c4f;
  --green: #23966c;
  --yellow: #faaa54;
}

body {
  background-color: var(--dark-grey);
  color: var(--white);
}

h2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* font-size: 40px; */
  color: var(--yellow);
}

p {
  font-family: "Yomogi", sans-serif;
  /* font-size: 30px; */
  color: white;
}

section {
  display: block;
  margin: auto;
  width: 1000px;
  display: flex;
}

.imgTag {
  width: 50vw;
  height: 50vh;
}

<section>
  <span>
        <h2 style="font-size:40px">Lorem Ipsum</h2>
        <p style="font-size:30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum
          mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
      </span>

  <img src="https://pixy.org/src/477/4774988.jpg" class="imgTag" />
</section>

uj5u.com熱心網友回復：

使用 agrid是一種選擇。你可以在這里閱讀更多關于它的資訊

.post-container {
  display: grid;
  grid-template-areas: 
      "header image" 
      "paragraph image";
}

.post-container>h2 {
  grid-area: header;
}

.post-container>p {
  grid-area: paragraph;
}

.post-container>img {
  grid-area: image;
}

<section class="post-container">
  <img src="https://via.placeholder.com/150" />
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum
    mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</section>

uj5u.com熱心網友回復：

使用柔性顯示。

如果您需要影像位于 flex 容器的左側，那么您可以使用row用于選擇器的flex-direction屬性值section。

section, div {
  display:flex;
  flex-direction:row-reverse;
  margin:20px;
  }

div {
flex-direction:column;
}
  

<section class="post-container">               
   <img src="https://picsum.photos/200/300" />
   <div>
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
      </div>
 </section>

uj5u.com熱心網友回復：

<section class="post-container">               
<div>
<h2>Lorem Ipsum</h2>
<p> Lorem Ipsum... </p>
</div>

<div>
<img src="images/default-image.png" />
</div>
</section>

將 flex 顯示添加到 post-container 應該可以解決這個問題。如果不是，您必須在 CSS 檔案中手動定位影像。不確定這是否是一個好習慣。

.post-container {
 display: flex
 }

標籤：css 图片

上一篇：我無法使用Pillow在Python中獲取所有元資料標簽

下一篇：Node.js-如何將影像上傳到Backblazeb2？