Question

我的中心有一个徽标，当我调整屏幕/窗口宽度时，它完全保持在中心位置。在徽标的左边我有一个只有两个单词的小菜单，我希望这个菜单/ div始终位于徽标和左边缘之间。

这可以只使用CSS吗？

要考虑徽标是否有自己的200px，但我可以使用margin-left: -100px;解决此问题。当它出现在不再适合左侧的屏幕尺寸时！我会将其放在带@media screen and (max-width: px) { ... }的徽标下。

像这样：http://postimg.org/image/v148gyc9b/

Answer 1

如果徽标的固定大小为200px，你可以尝试这样的：

#menu {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% - 100px);
}

Answer 2

假设你有这个html：

<div class="header">
    <div class="menuContainer">
        <div class="menu">
            Menu
            <!-- Your Menu here -->
        </div>
    </div>
    <div class="logo">Logo</div>
</div>

您的徽标具有静态宽度，并且您不希望它是百分比宽度，因此您可以使用.menu在徽标和左边缘之间取代此css：

.menuContainer {
    width: 50%;
    padding: 0 50px; /* 50 is (logoWidth/4) */
    margin-left: -50px; /* 50 is (logoWidth/4) */
    margin-right: -50px; /* 50 is (logoWidth/4) */
    box-sizing: border-box;
    position: relative;
    float: left;
}

当您使用媒体查询更改徽标的宽度时，请不要忘记更改“50px”。

这是JSFiddls的一个工作示例： http://jsfiddle.net/3047kfkn/

中间和中间div

2 个答案: