Question

我一直在努力解决这个问题，而且我在google或stackoverflow上找到的解决方案都没有对我有用。

我正在为一个课程项目建立一个网站，并且我在彼此之间有几个div（我感觉这就是绊倒它）以包含他们所在的元素＆＃ 39;应该这样去：

    <div id="page">

    <a href="index.html">
        <div id="banner">
            <img src="images\banner2.png" alt="Banner" width="980" height="130">
        </div> <!-- banner -->
    </a>

    <div id="navalign">
        <div id="header">ATV 1</div> 
        <img class="illustration" src="images\placeholder.png" alt="ATV Placeholder 1" width="250" height="250">
        <p class="bodytext"><br><br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
            ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
            voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

占位符图像设置为对齐包含div（#navalign）的右侧并浮动，而文本环绕它。相反，文本在#navalign中包装并传递浮动图像。

以下是正文和图像的类：

img.illustration {
position: absolute;
float: right;
right: 0px;
width: 250px;
margin: 0 0 10px 10px;
display: inline-block;}

p.bodytext {
position: absolute;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 40px;
left: 150px;
/*top: 40px; */
z-index: 5;
float: left;}

我已经尝试了几乎所有我能想到的东西来实现这一点，并且可能在这些课程中还有一些额外的东西不应该出现在那里我尝试的东西并且忘记了当它没有工作时删除它。我唯一能想到的是，在其他div中包含这两个元素是导致它不能包装的原因，但我不知道如何修复它而不重写整个网站。

Answer 1

那是因为您的p和img位于绝对位置。以下是您的样本的一部分。

img.illustration {
  float: right;
}

<div id="navalign">
  <div id="header">ATV 1</div> 
  <img class="illustration" src="http://placeholder.com" alt="ATV Placeholder 1" width="250" height="250">
  <p class="bodytext"><br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  </p>
</div>

文字没有环绕浮动图像

1 个答案: