div权利对居中div

使用html/CSS我试图把一个小div与其中的两个图像到右下方的大中心（与l/r页边距设置为自动）垂直弹性，但400px宽的div里面充满了很多东西。我似乎无法得到我需要的东西。div权利对居中div

这是我想要得到的东西，以便如果窗口太宽，绿色框会保留在红色旁边，空白区域会放在两个框的右边。如果窗口不够宽，用户将不得不滚动到右侧才能看到绿色框。

我觉得我只是缺少一些超级简单的解决了这一点。浮动不起作用，因为它将绿色框对齐到最右边，并将绿色和红色之间的空白区域放在一起。我尝试了各种'位置'css安排，但想要在红色框外面放置绿色盒子时遇到了麻烦。

EDIT（被要求更多细节）：

我试图使红色方框（#main）位置相对的，绿色（#sub）的位置绝对的。我玩过各种各样的左：px，右：px坐标，但发现当我把它拿到红盒子外面时，它变得不可见。我尝试了各种位置标签与对齐标签组合的组合。我尝试了内联块（我甚至不确定这里是相关的！）。

然后我正在读一些关于制作虚拟包装父母div的东西，所以我试图做到这一点，并制作了一个#wrapper，我尝试使用位置相对/绝对的方式进行实验，但最终导致与红色块之上的布局混淆真的只是一个横幅和H1）。

对不起，我没有实际的代码发布，但每次我尝试了一些东西，它没有工作，我只是删除了标签，所以我不会混淆所有这些额外的CSS周围。我几天来一直在做这件小事。现在我的代码已经很少位从以前的尝试遗留：

#main {width:400px; 
margin-left: auto; 
margin-right: auto; 
padding-bottom:0px; 
overflow:hidden;} 

#sub {right:-10px; 
bottom:100px; 
float:right;}

来源

2013-02-13 Incarnadin

发布您尝试过的一些代码。 – 2013-02-13 02:25:55

HTML

<div id="bigbox"> 
    <!-- content goes here --> 
    <div id="littlebox">SomeImages</div> 
</div>

CSS

#bigbox { 
    width: 900px; 
    margin: 0 auto; 
    position: relative; 
} 

#littlebox { 
    width: 150px; 
    position: absolute; 
    bottom: 5px; 
    right: -160px; // width + a 10px margin if desired 
}

http://jsfiddle.net/eLT9U/1/

来源

2013-02-13 02:36:38

这个工作除了现在littlebox是不可见的。 Firebug确实将它的矩形正好显示在我想要的位置......但是您只是无法看到它在那里。这是我的意思，当我说，一旦坐标移出bigbox，你不能再看到它了。 – Incarnadin 2013-02-13 02:48:32

请发表一个示例。 – 2013-02-13 02:49:10

在这里你可以看到，我可以选择与萤火虫区域，但实际内容是隐藏的，因为它在bigbox之外。 http://i50.tinypic.com/2i0rwcn.png – Incarnadin 2013-02-13 02:58:12

http://jsfiddle.net/ferne97/MDWWu/

HTML

<div class="wrap"> 
    <div class="container"></div> 
    <div class="box"></div> 
</div>

CSS

.wrap { 
    position: relative; 
} 

.container { 
    width: 200px; 
    min-height: 420px; 
    margin: 0 auto; 
} 

.box { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    margin-left: 120px; /* half .container width + extra margin */ 
}

对于利润率左，将您的内容区域的一半再添加任何额外的保证金在此基础之上，所以用这个例子这将是200/2 = 100 + 20px margin = 120px

来源

2013-02-13 02:40:51 ferne97

这可行，但我更喜欢我的解决方案，因为没有“复杂”的数学，也不需要额外的包装元素。 – 2013-02-13 02:46:10

true jimjimmy1995示例更灵活一些，因为它不依赖于固定宽度。 – ferne97 2013-02-13 02:46:41

完全没有想到这一点。如果屏幕上没有足够的空间，则可以随时使用媒体查询来移除小格子。 – 2013-02-13 02:48:34

div权利对居中div

回答

相关问题