1

天哪，真的，我以前来过这里一千次。我要摘录这个答案。我无法相信做这么简单的事情有多难。

<body>
    <div class="wrapper">
         <div class="class1">Page 1 of 1</>
         <div class="class1"> — </>
         <div class="class1">Next</>
    </div>
</body>

我需要包装器成为浏览器的死点。文本的长度或 div 的数量无关紧要。这到底是怎么做到的？！我在这里吓坏了。我在 CSS 方面并没有那么差。谷歌搜索这会出现 2005 年的论坛帖子。或者找到答案是因为指定了宽度，所以这只是作弊。

头发被拔掉了！

我不会把我的 CSS 放在这里，因为它只是不工作，没有意义。

谢谢。

4

4 回答 4

4

也许我错过了一些东西，但为什么这对你不起作用？：

.wrapper {
     text-align:center;   
}

你说你的 CSS 不相关，所以要么这太简单了，要么我错过了一些东西。再说一遍 - 有时最简单的解决方案是最好的解决方案。

如果您需要以某种方式显示内部 div，您没有提到它 - 所以我没有包括它。

OK 没有指定其中的 div 需要彼此相邻浮动

好的，然后display:inline在内部 div 上使用：

.wrapper div {
    display:inline;
}

“但我需要把它们展示出来block，它们必须漂浮起来！”

好的，然后将它们浮动并在需要时使用 clearfix。

.wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

在没有 clearfix 的情况下浮动内部 div 仍然可以正常工作，但是您没有提供您想要的模型，因此这使得回答这个问题变得更加困难。

IMO float is used in many situations where it is not needed, which can cause a lot of layout problems. It's a very poorly understood property and gets abused regularly.

于 2011-04-15T04:30:44.013 回答
3

Working jsfiddle: http://jsfiddle.net/6utN2/1/

I think you'd have been better off coding this with a UL and using the LI for your 3 elements.

Here's why: .wrapper MUST act as the container for those 3 divs because you've floated them - taking them out of the document flow.

The only way to reign in the problem caused by this is to wrap your wrapper...which is not the leanest solution one could write.

The UL technique works great here, though not that intuitive at first, BUT the UL is the container, LIs can all float left (and will stay nested within their parent). Finally, a single div could be used to span whatever element the UL resides, and center it.

ps - I used .fauxBody as the wrapping wrapper - just a heads up.

于 2011-04-15T06:52:40.090 回答
0

没有指定宽度？如果不指定包装器的宽度，它将是主体的 100%。如果您确实设置了宽度，则只需要：

#wrapper { width: 960px; margin: 0 auto; }
于 2011-04-15T02:56:10.377 回答
0

由于 adiv是块级元素，因此它需要指定一个宽度以小于浏览器宽度的 100%。通常，通过定义，width您可以使用margin: 0 auto 0 auto;( top、和) 将.rightbottomleftdiv

如果做不到这一点，你可以使用：

#wrapper {
    display: inline-block;
    margin: 0 auto;
}

这会将#wrapper div其缩小到其内容的宽度，然后在窗口中居中。这与 IE < 7 不兼容，我相信，因为 adiv 没有“自然”具有display: inline.

于 2011-04-15T02:56:44.237 回答