底部的HTML/CSSmenu与中间的图像冲突

我是新的html，css和目前工作的一个页面。 我无法在右下角对齐菜单，它与我中间的3张图片发生冲突。当我对中间的图像进行更改时，左下角的徽标也会不断变化。请通读代码并让我知道

身体{ 保证金：0； 填充：0； } .背景{ 位置：相对位置； } .背景.文本{ 位置：绝对位置； 顶部：300px； 左：300px； 宽度：300px； } .标志{ 位置：绝对位置； 左：10px； 底部：10px； } 底部导航{ 列表样式：无； 显示：内联块； 宽度：100%； 位置：绝对位置； 右：0px； 底部：0px； } 李国宝{ 宽度：0%； 浮动：对； 文本对齐：右对齐； } .图像{ 宽度：250； 身高：250； 显示：内联； 浮动：对； 边框：2个实心FFF； 边缘顶部：300px； } 欢迎 办公室

墨水

迪维， 查看clearfix

您需要将修复程序应用于映像父容器。映像

此外，在不一定需要的情况下，您也使用了大量的绝对定位

您可以将徽标向左浮动，将图像容器向右浮动，同时对每个图标应用显式宽度

---

还有，为什么您将.images设置为250宽，而images设置为400宽？

我不确定这是否是您正在寻找的答案，但此解决方案解决了您遇到的菜单未显示在右下角的问题，我认为这是您使用某些css试图实现的目标：

我重新组织了一下html的结构，因为你说徽标应该在底部，我假设在其他较大的图片下面

<div class="background">
    <img src="images/landing_page.png"/>
    <div class="text">
        <h1>welcome</h1>
        <p>office</p>
        <p>ink</p>
    </div>        
    <div class="images">
        <img src="images/top1.jpg" width="400" style="display:inline-block;"/>
        <img src="images/top2.jpg"width="400" style="display:inline-block;"/>
        <img src="images/top3.jpg" width="400" style="display:inline-block;"/>
    </div>
    <div class="logo"> <img src="images/logo_03.png"/> </div>
    <div id="bottomnav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About </a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>

有用提示：在处理css时，少即是多，尽量在样式上简洁，这样你就不必用其他样式写样式，也不必强迫自己绕过DOM

---

希望这有助于/让您找到正确的方向。

无法加载图像，请查看url，以便我们能够处理此问题。这并不意味着什么，问题部分不清楚。迪维给了我们一把小提琴，这样我们就可以知道问题出在哪里了。什么并不意味着什么这是不明确的。请澄清您的评论，这样我可以帮助您理解我的答案。他提出的问题几乎不清楚，我们需要一把小提琴来解决这个问题。而且图像的宽度并不重要。@Milan实际上，OP问题很清楚，可以理解。OP提供了代码，并且它不是特定于特定环境的，因此问题中不需要小提琴，尽管它会有所帮助。然而，你的答案只是观察和建议，而不是解决方案。这个答案的内容应该是评论，而不是回答是的，提琴会很有帮助，这就是我所说的。

#bottomnav {
    display:inline-block;
    float:right;
}
#bottomnav ul {
    list-style: none;
}
#bottomnav ul li {
    display: inline-block;
}