当前位置：文江博客话题详情

彼此相邻浮动的大元素？

发布于 2024-10-31 18:59:08 字数 372 浏览 1 评论 0原文

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

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

有什么想法吗？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

彻夜缠绵 2024-11-07 18:59:08

你的意思是这样吗？

示例小提琴：此处

我使用了我最喜欢的浮动替代品，inline-blocks

如果你真的把它从小提琴中拿出来，它有一些漂亮（花哨？）的颜色，这表明它允许 centered_content div 上的 min-width: 900px;也可以工作，我删除了菜单的绝对定位，因此内容将位于其下方，仅用于演示，但您可能会发现它很有用..

如果有任何好处或您有任何问题，请告诉我

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

新示例：此处

回复：评论中正确提到了 IE6/7 hack；

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

不必是“解析黑客”，如果这是您的偏好，只要第二条规则以某种方式给予 [lte IE 7]，并且单独地它不能与 * 黑客或任何东西，它不会工作......必须在一个单独的规则集中。

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

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

将其恢复为实际内容 div 的正常状态，与恢复正常包装行为相同的位置

.centered_content {
    width: 900px;
    margin: 0px auto;
    background: #fcf;
    white-space: normal;
    word-spacing: 0;
}

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

Do you mean like this?

Example Fiddle: here

I used my favourite alternative to floats, inline-blocks

if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..

let me know if any good or if you have any questions

Updated with some jQuery and to make corrections for default word-spacing

New Example: here

re: the IE6/7 hack rightly mentioned in the comments;

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

needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.

I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper

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

then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour

.centered_content {
    width: 900px;
    margin: 0px auto;
    background: #fcf;
    white-space: normal;
    word-spacing: 0;
}

and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)

回复收藏 0 原文

黑白记忆 2024-11-07 18:59:08

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

这意味着您永远无法将元素浮动到页面之外。

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

回复收藏 0 原文

美胚控场 2024-11-07 18:59:08

听起来您正在创建一个水平的单页作品集。我最近一直在做类似的事情。

使用你的小提琴，我将 .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 的视图。

It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.

Using your fiddle I've set the .segment class to

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

and then offset each left positioning further off the screen

#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/

I also added some jQuery logic to switch views for the divs.

回复收藏 0 原文