0

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

这就是我想要得到的，如果窗口太宽，绿色框会紧挨着红色框，空白区域位于两个框的右侧。如果窗口不够宽，用户必须向右滚动才能看到绿色框。

所需的布局

我觉得我只是错过了一些超级简单的解决方案。浮动不起作用，因为这会将绿色框一直对齐到右侧，并将空白区域放在绿色和红色之间。我尝试了各种“位置”css安排，但在想要红框外的绿框时遇到了麻烦。

编辑（要求提供更多详细信息）：

我尝试使红色框（#main）位置相对，而绿色（#sub）位置绝对。我玩弄了各种 left:px, right: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;}
4

2 回答 2

0

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-13T02:36:38.107 回答
0

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 边距 = 120px

于 2013-02-13T02:40:51.727 回答