Question

关于CSS定位的一个简单问题。我的网站上有几个“段”，它们是100％宽（填满屏幕），我希望它们彼此相邻。所以只有第一个可见，其他的将在屏幕外。我已经尝试过没有运气的位置和溢出属性。现在他们只是在彼此之下弹出而不是浮动。

如果元素没有超过屏幕宽度，这将完美地工作，但正如他们所做的那样，它们就像我之前所说的那样弹出。我已经尝试为“包装器”设置一个巨大的宽度，类似于99999px。然后将段设置为100％，但这将只填充整个99999px宽度而不是屏幕。

有什么想法吗？

JSFiddle示例：http://jsfiddle.net/9xGPb/

Answer 1

浮动的意思是尝试向右或向左浮动，除非没有空间。

这意味着你不能将一个元素浮出页面。

如果您需要将元素保留在页面之外，则需要使用其他定位机制，例如position: absolute。

Answer 2

听起来你正在创建一个横向的单页组合。我最近一直在做类似的事情。

使用你的小提琴我将.segment类设置为

.segment {width:90%;height:90%;position:absolute;}

然后将每个left定位偏离屏幕

#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}

http://jsfiddle.net/9xGPb/2/

我还添加了一些jQuery逻辑来切换div的视图。

Answer 3

你的意思是这样吗？

示例小提琴：here

我使用了我最喜欢的花车替代品inline-blocks

如果你真的从小提琴中取出它有一些漂亮的（华丽的？）颜色，这表明它允许ene_content div上的min-width: 900px;也可以工作，我删除了菜单的绝对定位所以内容会低于它，仅限演示，但你可能会发现它很有用..

让我知道是否有任何好处或者如果您有任何问题

更新了一些jQuery并对默认字间距进行了更正

新示例：here

re：IE6 / 7黑客在评论中正确提到;

.segment {
    display: inline-block;
    overflow: hidden;
    width: 0;
}
.segment {display: inline !ie7;}

如果那是你的偏好，那么

不一定是“解析黑客”，只要第二条规则以某种方式给予[lte IE 7]，并且不能单独使用{{1}将其合并到原始规则中骇客或任何东西，它将无法工作..必须在一个单独的规则集。

我发现单词间距可能是一个问题，如果依靠宽度来隐藏，内联块的自然行为是在元素之间放置3-4px，就像单词之间的空格一样，解决方法是纠正单词 - 包装器上的空间

然后恢复正常的实际内容div，与恢复正常包装行为相同的地方

.segment-wrapper {
   white-space: nowrap;
   word-spacing: -4px;
}

最后，除了这很有趣之外......在这个新小提琴中有2个效果 - 取消注释并评论另一个......原谅我，我正在玩！：）

Answer 4

我仍然不完全确定你想从页面开始哪些片段，但是这个jsfiddle使用position来将#two div推到右边：http://jsfiddle.net/EdAZP/1/

您想要从页面开始，您的示例的哪一部分？

Answer 5

您是否尝试隐藏其他元素并使用一些javascript切换它们（jQuery更容易）？

http://api.jquery.com/toggle/

浮动大元素彼此相邻？

5 个答案:

新示例：here