Question

我正在寻找一种方法将文本填充div包装在另一个div周围。

似乎我可能错过了一个至关重要的细节。该文本需要包含嵌入的YouTube视频。这似乎不适用于您提供的所有答案，我已经尝试了所有给定的示例，一旦我嵌入视频，文本就会消失。

Answer 1

您可以使用float: left，然后.content会在DOM下面将其换行

＆＃13;

.wrapper {
  border: 1px solid blue;
}
.left {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  margin: 0 10px 10px 0;
}

＆＃13;

<div class="wrapper">
  <div class="left"></div>
  <div class="content">
    The English word world comes from the Old English weorold (-uld), weorld, worold (-uld, -eld), a compound of wer "man" and eld "age," which thus means roughly "Age of Man."[3] The Old English is a reflex of the Common Germanic *wira-alđiz, also reflected in Old Saxon werold, Old High German weralt, Old Frisian warld and Old Norse verǫld (whence the Icelandic veröld).[4]

The corresponding word in Latin is mundus, literally "clean, elegant", itself a loan translation of Greek cosmos "orderly arrangement." While the Germanic word thus reflects a mythological notion of a "domain of Man" (compare Midgard), presumably as opposed to the divine sphere on the one hand and the chthonic sphere of the underworld on the other, the Greco-Latin term expresses a notion of creation as an act of establishing order out of chaos.

'World' distinguishes the entire planet or population from any particular country or region: world affairs pertain not just to one place but to the whole world, and world history is a field of history that examines events from a global (rather than a national or a regional) perspective. Earth, on the other hand, refers to the planet as a physical entity, and distinguishes it from other planets and physical objects.

'World' distinguishes the entire planet or population from any particular country or region: world affairs pertain not just to one place but to the whole world, and world history is a field of history that examines events from a global (rather than a national or a regional) perspective. Earth, on the other hand, refers to the planet as a physical entity, and distinguishes it from other planets and physical objects.
  </div>
</div>

＆＃13;

Answer 2

将两个div包装在'container'div中，并为'div1'使用float作为样式。这将为您提供所需的结果。请参阅下面的代码。

<div class="container">
  <div class="div1" style="float:left; width: 150px; height: 150px; margin: 10px; background-color: #ff0000;"></div>
  <div class="div2">Wrapping text comes here.</div> 
</div>

Answer 3

您可以将div 1放在div 2中。

实施例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Div Test</title>
    <style>
        .outer {
            width:800px;
            height:600px;
            background-color:#22e;
        }

        .inner {
            width:300px;
            height:200px;
            background-color:#e22;
        }
     </style>
</head>
<body>
    <div class="outer">
         <div class="inner">
         </div>
    </div>
</body>
</html>

Answer 4

你可以尝试这样的事情。 div内div，包含保证金和浮动属性。

https://aws.amazon.com/ec2/pricing/

如何将包含文本的div包装在另一个div周围？

4 个答案: