Question

所以在我的网站上，在这个页面上http://dunnrite.co.uk/our_work，右侧的文字应该在右边，但有时候在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>

和相应的CSS

#left_side_work {
    width: 40%;
    padding-top: 30px;
    left: 0;
    margin-left: -250px;
    float: left;
}

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

有什么想法吗？

由于

Answer 1

快速回答：从float: right

中删除#right_side_work

更长的答案：不要考虑将绝对定位用于布局目的（以及大多数其他用途），因为您允许块将一个叠加在另一个之上并且......失败。
不需要使用浮动和绝对定位：可以使用right: 0将其定位到右侧（但不要使用绝对定位）。
浮动块应首先出现在HTML代码中。如果它是div并且它是浮动的，为什么还要设置inline-block？

您是否尝试在每张图片旁边显示文字？然后，您的HTML代码应为：image1 - text1 - image2 - text2 - etc，而不是(all the image) - (all the text)。创建内容的行/行，然后在每个列的内部，而不是2个巨大的文本列，这些文本在最轻微的修改时不会水平对齐。

最后，left，right，top和bottom属性仅在元素以某种方式定位时才有用。左边部分没有效果。

Answer 2

更改

float：right;

到

float: left;

在你的style.css的第175行

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

为什么我的网站文字与图像重叠？

2 个答案: