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;}
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
}
这个工作除了现在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:46:10
true jimjimmy1995示例更灵活一些,因为它不依赖于固定宽度。 – ferne97 2013-02-13 02:46:41
完全没有想到这一点。如果屏幕上没有足够的空间,则可以随时使用媒体查询来移除小格子。 – 2013-02-13 02:48:34
发布您尝试过的一些代码。 – 2013-02-13 02:25:55