围绕div包装段落

Question

我试图将我的段落文字包裹在图像的区域周围，我已经尝试过，但无法弄清楚为什么不能正常工作，我的头脑是字面上左右浮动......

这是css：

/* CSS Document Sidebar */
#sidebar {  
    background-color: #FFF;
    width: 330px;
    height: auto;
    float: left;
    }
#news {
    width: 300px;
    height: 200px;
    margin: 15px;
    position: relative;
    border: solid 1px;
    }
.newsImage {
    width: 120px;
    height: 120px;
    position: absolute;
    float: left;
    bottom: 0px;
    margin: 5px;
    padding: 10px;
    border: solid 1px;
    }
.newsImage img {
    width: 100%;
    height: 100%;
    }
#news p.title {
    font-size: 14px;
    color: #333;
    margin: 5px;
    }
#news p.content {
    font-size: 12px;
    word-wrap:break-word;
    margin: 5px;
    color: #333;
    }

/* CSS Document Sidebar - END */

这里是divs

  echo '<div id="news">';
  echo '<p class="title">'.$row_Display['PageName'].'</p>';
  echo '<p class="content">'.$row_Display['PageContent'].'</p>';
  echo '<div class="newsImage">';
  echo '<img src="'.trim($row_Display['Image'], '/').'" />';
  echo '</div>';
  echo '</div>';

更新： 在这里添加我的结构示例（我没有上传图像的声誉）：

-----------------------
| <p>[TITLE]          |
|                     |
| <p>[CONTENT]        |
|-----------| content |
| IMAGE div |  wrap   |
|           | around  |
-----------------------

解： 问题是position:absolute像Martijn说的那样，但通过一些测试，我设法达到我自己的解决方案。对于那些仍然坚持这个问题的人，你只需要：

• 从CSS中删除position:absolute和position:relative

• 将每个段落<p>设置为<div>，使用相同的类或ID

• 现在将<div 'title'>放在HTML代码的顶部并设置float:left

• 在上一个emtpy <div class='clear'></div>下创建并设置CSS .clear{clear:both;}
• 现在图片的div进入内容/文本的div，请确保将<img src='' />放在文本之前，以便图像可以自由浮动。
• 然后您可以使用.img{float:right;}和.content/text{float:left;}设置CSS。这样做，文本将完美地包裹图像

对于那些投票否定的人，如果我以前的帖子没有那么明确和完整，请原谅我的英语。 希望这可以帮助别人。 问候。

Answer 1

尽量避免绝对位置。从长远来看，这只会使事情变得复杂化，维护。

然后，您首先需要做的是创建一个更像表格的结构。创建两列（您的标题+内容和图像）并从那里继续：

-----------------------
| [TITLE]    |  IMAGE |
|------------|  IMAGE |
| [CONTENT]  |  IMAGE |
-----------------------

你要找的东西是display: inline-block;，这允许多个元素在一行（inline）上，并且仍然给它维度（block）。这确实需要元素相互接触，它们之间没有空格（参见下面提供的示例）。

我不是漂浮迷。 IMO他们总是比他们修复的东西复杂化。