如何展平文章中的文字（css和html）？

Question

我想问一些关于 CSS 和 HTML 的问题。 我有一个旅游博客，我想在我的文章帖子中添加新的类似 Time.com 上的相关帖子，但我有一个问题。

我需要什么？

一个新的部分，如时间上的相关帖子。 截图：Time.com.

我的问题：The text can't flatten the content。

如何制作像 Time.com 这样的文本/文章？ 谢谢

我的 HTML 代码：

    <div class="resources">
      <h4>Other facts</h4>
        <ul>
          <li>United Arab Emirates Facts</li>
          <li>Venice Facts</li>
          <li>Great Wall of China Facts</li>
          <li>Dead Sea Facts</li>
          <li>Grand Canyon Facts</li>
        </ul>
    </div>

我的 CSS：

.resources }
    width: 30%;
    float: left;
}

Answer 1

您需要将float 添加到图像中，以便文本很好地环绕您的图像。我认为这回答了你的问题。

Answer 2

<p> 可以这样工作：

.resources > ul {
   width: 30%;
   float: left;
   margin-left: -30px;
}
.resources p {
   margin-top: -30px;
}
.resources h4 {
   margin-bottom: -5px;`
}

    <h2 style="text-align: center;">30 Fun and Interesting Facts about Germany</h2>
<div class="resources">
<h4>Other facts</h4>
<ul>
 	<li>United Arab Emirates Facts</li>
 	<li>Venice Facts</li>
 	<li>Great Wall of China Facts</li>
 	<li>Dead Sea Facts</li>
 	<li>Grand Canyon Facts</li>
</ul>
<p><strong>Interesting Facts about Germany</strong> - Interested in spending some time in Germany during for your vacation? Well, it’s a good idea for you to know about some facts about Germany as mentioned below.</p>
<p>Those facts can be helpful for you to understand this country better and thus, you can enjoy your vacation more. So, here they are 30 interesting and fun facts about Germany.</p>

</div>
<ol>
 	<li><p><strong>The Second Beer Consumer in the Europe</strong> - With the love of drinking beer, (to be honest, Germany is known as the Europe’s second beer consumer), it’s legal to drink anywhere you want. The laws regarding boozing are always loose. It’s even possible for teenagers to buy and drink alcohol freely by the age of 14! The first beer consumer in the EU is Ireland. What cool facts about Germany.</p></li>
 	<li><p><strong>College Education Is Free for Everyone!</strong> - Good news for you who want to go to Germany to college and studies in Germany. It’s among the facts about Germany that college education is free even for non-Germans. The government thinks that it’s entirely unjust to ask for tuitions from the students of higher education. So, do you have more urge to get a scholarship there and studies in Germany?</p></li>

但是，如果该元素包含另一个 <ol> 和 <li>，那应该不起作用。

如果我像这样使用 HTML 元素呢？

    <p><strong>Interesting Facts about Germany</strong> - Interested in spending some time in Germany during for your vacation? Well, it’s a good idea for you to know about some facts about Germany as mentioned below.</p>
<p>Those facts can be helpful for you to understand this country better and thus, you can enjoy your vacation more. So, here they are 30 interesting and fun facts about Germany.</p>
    
<div class="resources">
    <h4>Other facts</h4>
    <ul>
     	<li>United Arab Emirates Facts</li>
     	<li>Venice Facts</li>
     	<li>Great Wall of China Facts</li>
     	<li>Dead Sea Facts</li>
     	<li>Grand Canyon Facts</li>
    </ul>
    </div>
<ol>
 	<li><p><strong>The Second Beer Consumer in the Europe</strong> - With the love of drinking beer, (to be honest, Germany is known as the Europe’s second beer consumer), it’s legal to drink anywhere you want. The laws regarding boozing are always loose. It’s even possible for teenagers to buy and drink alcohol freely by the age of 14! The first beer consumer in the EU is Ireland. What cool facts about Germany.</p></li>
 	<li><p><strong>College Education Is Free for Everyone!</strong> - Good news for you who want to go to Germany to college and studies in Germany. It’s among the facts about Germany that college education is free even for non-Germans. The government thinks that it’s entirely unjust to ask for tuitions from the students of higher education. So, do you have more urge to get a scholarship there and studies in Germany?</p></li>

Answer 3

您是否尝试为 ul 提供类 .resources？

<div class="resources">
<h4>Other facts</h4>
<ul class ="resources">
    <li>United Arab Emirates Facts</li>
    <li>Venice Facts</li>
    <li>Great Wall of China Facts</li>
    <li>Dead Sea Facts</li>
    <li>Grand Canyon Facts</li>
</ul>
</div>