Question

我正在尝试编写新的网页。在顶部我想有一个名为top-bar-container的中心div，另外三个div就是这样：

<div id="top-bar-container">
    <div id="top-main-menu-container">
        <ul id="main-menu">
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li><a href="#">link 3</a></li>
            <li><a href="#">link 4</a></li>
        </ul>
    </div>

    <div id="logo-placeholder">
        <a href="#"><img src="images/logo.png" width="300" height="75"></a>
    </div>

    <div id="mail-login-container">

    </div>
</div>

当试图让div左侧的效果始终位于最左侧，右侧，右侧时，徽标始终位于中间位置。我喜欢使用position：绝对但这种不情愿。我必须以不同的方式处理。有人能帮我解决这个问题吗？

Answer 1

这是实现目标的一种方式。

#top-bar-container > div {
 float: left;
}

Answer 2

您可以向左浮动链接，然后向右浮动邮件容器。将文本对齐中心应用于父div，一切都应该没问题。

#top-bar-container {
    text-align: center;
}
#top-main-menu-container {
    float:left;
}
#mail-login-container {
    float:right;
}

小提琴：

http://jsfiddle.net/3eut86s6/

三个div总是在中心

2 个答案: