Question

使用html / CSS我试图把一个带有两个图像的div放在一个大的居中（l / r边距设置为自动）垂直弹性之外的右下方，但400px宽的div充满了大量的里面的东西。我似乎无法完全得到我需要的东西。

这是我想要的，所以如果窗口太宽，绿色框保持在红色框旁边，空白区域位于两个框的右侧。如果窗口不够宽，用户必须向右滚动才能看到绿色框。

我觉得我只是错过了一些超级简单的解决方案。 Float不起作用，因为它将绿色框一直对齐，并将空白区域放在绿色和红色之间。我尝试了各种'位置'css安排，但是想要红框外面的绿盒子有困难。

编辑（要求提供更多详情）：

我尝试使红色框（#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;}

Answer 1

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

Answer 2

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

正好反对一个中心的div

2 个答案: