Question

这就是我想要实现的目标

http://i.stack.imgur.com/e9xZa.jpg

我试过这个

jsfiddle.net/RUSm3 /

但是您可以看到图像上的日期重叠。

所以我添加了左：215px为日期

jsfiddle.net/9aw29 /

它看起来不错，但也许我没有图像。我怎样才能将日期带回最左边？我试图在没有php的情况下实现这一点。

Answer 1

如果你有这样的div

<div class="container">
    <div class="date">today</div>
</div>

使用此css片段，您的日期div将位于其容器的右下角。

.container {
      position:relative;
    width: 100px;
    height: 180px;
    border: solid 1px black;
}
.date {
        bottom:10px;
        position:absolute;
        right:10px;
    }

您可以验证其有效here

Answer 2

我不确定您的标记是什么，但最简单的解决方案是将标题，文本和日期全部放在一个div（内部.entry）中，并将图像浮动到离开，如果它在那里。日期将按照您在示例中所做的那样定位。当没有图像时，整个div将向左移动。

<div class="entry">
  <img [...] />
  <div>
    <h2>Heading</h2>
    <p>Entry text</p>
    <p class="date">[Date]</p>
  </div>
</div>

Answer 3

这是我想出的，对你来说可能是一个很好的起点。简而言之，将两个文本区域包装在它们自己的div中，并将它们包装在父div中。将父div浮动到右边，使其位置不是静态的。如果位置是静态的，则不能使用position：absolute属性及其子div。

<style type="text/css">
    div.entry{
        float: left;
        position: relative;
        width: 40%;
    }
    img.left{
        float: left;
    }   
    div.right{
        float: right;
        display: inline;
        position: absolute;
        height: 100%;
        width: 50%;
    }   
    div.topRight{
    }   
    div.bottomRight{
        position: absolute;
        bottom: 0px;
    }   
</style>




<div class="entry">
  <img class="left" src="http://www.google.com/logos/2010/halloween10-ires.gif"/>
  <div class="right">
      <div class="topRight">
          Some stuff
      </div>
      <div class="bottomRight">
          Some other stuff
      </div>
  </div>
</div>

定位到动态div的底部

3 个答案: