如何將帶有影像的部分（浮動：左；）和沒有影像的部分分開？[復制]-有解無憂

這個問題在這里已經有了答案：如何將帶有影像的部分（浮動：左；）和沒有影像的部分分開？[復制]

代替

如何將帶有影像的部分（浮動：左；）和沒有影像的部分分開？[復制]

誰能告訴我怎么做？

我目前使用了一些<br>s 和一個 字符來模擬我想要的結果

uj5u.com熱心網友回復：

您正在尋找的是所謂的clearfix：什么是 clearfix？

發生了什么？

通過使用float:left您實際更改文本浮動 - 從您設定浮動的點開始。

要恢復常規的塊狀行為，您需要再次清除浮動。

body {
  font-family: Avenir;
}

img {
  width: 70%;
  height: 75%;
  float: left;
  margin-right: 10px;
  cursor: pointer;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

a {
  color: grey;
}

a:hover {
  color: black;
}

.title {
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>??Arrexi's Cafe??</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <h1>??Arrexi's Cafe??</h1>
  <div id="body">
    <div class="clearfix">
      <h1 class="title">About Us
        <hr>
      </h1>
      <img src="https://dummyimage.com/300x200/000/fff" alt="Arrexi's Cafe!">
      <article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! <a href="">Join us now!</a></article>
    </div>

    <h1 class="title">Feedback</h1>
    <hr>
    <h3>Have joined our server, and want to give some feedback?</h3>
    Enter your suggestion in the following box then press "Submit"!
    <br>
    <textarea id="feedback"></textarea>
    <button onclick="submit()">Submit</button>
  </div>
  <script src="script.js"></script>
</body>

</html>

I wrapped your whole upper part into a div with the clearfix class. Inside that div you change the float behaviour by using float:left on the image.

By adding the clearfix to the div, there will be a after Element which sets clear:both which basically restores regular behaviour so everything after that doesnt float anymore.

Fore more information and some live examples see https://www.w3schools.com/css/css_float.asp, https://www.w3schools.com/css/css_float_clear.asp and https://www.w3schools.com/css/css_float_examples.asp.

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/329278.html

標籤：html css

上一篇：表單驗證有效，但當用戶輸入錯誤答案時仍會提交

下一篇：如何讓我的重置按鈕在沒有表單的情況下在HTML中作業？