8

jsFiddle

HTML 

<div id="a">
  <div id="b">bbb</div>
  <div id="c">ccc</div>
</div>

CSS

#a {
  border: 1px solid black;
   *zoom: 1;
}
#a:before, #a:after {
   display: table;
    content: "";
    line-height: 0;
}
#a:after {
  clear: both;
}

#b {
  float: left;
  font-size: 36px;
  background-color: blue;
}

#c {
  float: right;
  background-color: red;
}

我希望红色框 ( #c) 与右下角对齐。

如果我添加position:relative到它#a并添加position:absolute;bottom:0;right:0到#c它，但只要我添加它，蓝色框以及容器 ( #a) 就会折叠。我不知道哪个会更高，#b或者#c我想将定位应用于他们两个。通常的 clear-fix 不适用于绝对定位的元素。

那么如何在不折叠容器 div 的情况下定位#b到左下角和右下角？#c#a

4

7 回答 7

1

在测试了几个不同的选项后，我发现在父容器上使用 position:relative 允许子标签绝对定位，但相对于父容器，而不是文档窗口。

#a {
    border: 1px solid black;
    height: 500px;width:500px;
    position:relative;
    }

#b, #c{
       position:absolute;bottom:0;
      }
#b{
    left:0;
    font-size: 36px;
    background-color: blue;
    }

#c {
    right:0;
    background-color: red;
    }
于 2013-01-14T08:29:43.243 回答
1

好吧，这是一个非常深奥的解决方案，但它有效:)

设置 #b 和 #cinline-block以便它们像常规内联一样相互协作，我们可以使用vertical-align. 然后添加text-align:justify;到容器并:after使用width:100%将#b 和#c 拉到左侧和右侧。将容器的字体设置为零（并在内部块中恢复）以避免下/下线和其他间隙，并将零字体设置为 :after。

#a {
  border: 1px solid black;
  text-align:justify;
  font-size:0;
  line-height:0;
}
#a:after {
  content:"";
  display:inline-block;
  width:100%;
}

#b, #c {
  display:inline-block;
}

#b {
  vertical-align:top;
}
#c {
  vertical-align:bottom;
}

font-size:0;看起来在 IE 中不起作用，所以我们几乎不需要 1px 负边距的解决方法：

/* ie fix */
#a {
  font:1px/0 sans-serif;
}
#b, #c {
  margin:0 0 -1px;
}

小提琴：http: //jsfiddle.net/gv4qd/35/

于 2013-01-14T15:24:28.510 回答
1

我相信这应该这样做

position: absolute;
top: auto;
bottom: 0px;

目前无法测试但稍后会测试，只需使用您希望在底部对齐的 div 上的 css

于 2013-01-14T16:46:18.617 回答
1

经过一番搞砸后，这似乎可行。诀窍是绝对定位#a，#b并将#c所有三个放置在相对定位的 div 中。

HTML

<div id="alpha">
  <p>Here is a box to give the<br /> outer<br /> container<br /> some<br /> height</p>
  <div id="a">
    <div id="b">bbb</div>
    <div id="c">ccc</div>
  </div>
</div>

CSS

#alpha {
  position: relative;

}

#a {
  border: 1px solid black;
   *zoom: 1;
  position:absolute;
  height:100%;
  width:100%;
  top:0;bottom:0;
}
#a:before, #a:after {
   display: table;
    content: "";
    line-height: 0;
}
#a:after {
  clear: both;
}

#b {
  font-size: 36px;
  background-color: blue;
  position: absolute;
  left:0;
  bottom:0;
}

#c {
  background-color: red;
  position: absolute;
  right:0;
  bottom:0;
}

JSFiddle http://jsfiddle.net/mrikemccabe/gv4qd/36/

我在外部 div 中放置了一个段落，以使框具有一定的高度。如果您在外部 div 中没有任何内容，只需在 CSS 中为外部 div 声明一个固定高度。

于 2013-01-14T17:02:57.773 回答
0

尝试以下操作：

#a {
  border: 1px solid black;
  *zoom: 1;
}
#a:before, #a:after {
  display: table;
  content: "";
  line-height: 0;
}
#a:after {
 clear: both;
}

#b {
  float: left;
  font-size: 36px;
  background-color: blue;
}

#c {
   float: right;
   background-color: red;
   position:absolute;
   bottom:0; right:0;
   vertical-align:bottom;
 }
于 2013-01-14T09:10:10.557 回答
0

给 auter div 位置：相对

给内部div位置：绝对和底部：0px；左：0px；或任何你喜欢的地方。

给出外部 div 位置非常重要：相对。如果不是有时它会工作，有时不是。当然，它不会像所有东西一样在非常古老的 Internet Explorer 中工作。

绝对元素没有高度，所以如果你不能使用指定的（比如高度：120px）你就是 f* * *。您只能通过 javascript 来检查一个绝对元素和第二个元素的高度，并使用特殊边距添加它。

要确定哪个容器在顶部，您可以使用 z-index。

我忘了还有另一种方法。使用两个 div 的虚假重复内容，但工作量很大，因此使用 javascript 会更快。

于 2013-01-14T10:52:13.127 回答
0

试试这个你的css文件：

   #a {
        border: 1px solid black;  
        position:relative;
       *zoom: 1;
    }
    #a:before, #a:after {
       display: table;
        content: "";
        line-height: 0;
    }
    #a:after {
      clear: both;
    }

    #b {
      float: left;
      font-size: 36px;
      background-color: blue;
    }

    #c {
        float: right;
        background-color: red;
        position: absolute;
        bottom:0px;
        right:0px;
    }
于 2013-01-14T16:47:56.343 回答