Html 为什么我的网站文本与图片重叠？

所以在我的网站上，在这个页面上，右边的文本应该在右边，但有时在chrome和其他浏览器中，它会覆盖图片。当您刷新几次或调整浏览器大小（我的网站的响应）时，它将恢复正常

以下是HTML代码：

<div id="content_box">

            <div id="left_side_work">
                <h3>Our Work</h3>
                <a class="fancybox" rel="group" href="Images/Clubz4u.jpg">
                    <div id="clubz4u_pic"></div>
                </a>
                <a target="blank" href="http://beauxcadeaux.co.uk">
                    <div id="beaux_cadeaux_pic"></div>
                </a>
            </div>

            <div id="right_side_work">
                <h3>Clubz4u</h3></br>
                <p>Clubz4u was a social enterprise that Dunn Rite set up for DHSB school. It enabled club owners/event organisers to list their activity's details on our site for free. 
                    This also meant that anyone looking to join a club could easily see the clubs on offer in their region.
                    To help cover any costs associated with setting up the website Clubz4u had live adverts placed by Google which when clicked generated income.
                   We also produced interactive Facebook features.
                </p>
                <div id="beaux_cadeax_text">
                <h3 style="margin-top:150px;">Beaux Cadeaux</h3></br>
                <p>Beaux Cadeaux is an online gift shop created by husband and wife Val and Richard Cass. They recently created their own website and needed Dunn Rite's assistance gaining some SEO. Richard commented on our Dunn Rite representative saying "I have found you to have a maturity and professionalism beyond your years. You have been helpful and efficient. It would be good to think that we could both benefit from working with each other in the future."
                </p>
                </div> 
            </div>

            <div id="nextpage">
                <a href="our_work2">Next &rarr;</a>
            </div>
        </div>

有什么想法吗

---

谢谢

快速回答：从

#右侧(工作

更详细的回答：甚至不要考虑在布局中使用绝对定位（以及大多数其他用途），因为您允许块将一个块叠加在另一个块上，并且。。。失败。
不必同时使用浮动和绝对定位：可以使用

right:0

将其定位到右侧（但不要使用绝对定位）。
在HTML代码中，块浮动应该放在第一位。如果它是一个div并且是浮动的，为什么还要费心设置

内联块

是否尝试在每个图像旁边显示文本？那么您的HTML代码应该是：

image1-text1-image2-text2-etc

，而不是

（所有图像）-（所有文本）

。创建内容的行/行，然后在每一行中创建一列，而不是两个巨大的文本列，这些文本在稍作修改时都不会水平对齐

最后，

左

、

右

、

上

和

下

属性仅在元素以某种方式定位时有用。此处对左侧部分没有影响。

更改

浮动：对

到

在style.css的第175行

#right_side_work {
 margin-top: 35px;
 display: inline-block;
 width: 400px;
 height: auto;
 float: left;
 margin-left: 70px;
 position: absolute;
}

---

谢谢，我将float:right改为float:left，并将其改为position:relative。现在一切似乎都很好。

float: left;

#right_side_work {
 margin-top: 35px;
 display: inline-block;
 width: 400px;
 height: auto;
 float: left;
 margin-left: 70px;
 position: absolute;
}