当前位置：文江博客话题详情

定位到动态 div 的底部

发布于 2024-09-30 08:57:39 字数 304 浏览 1 评论 0原文

这就是我想要实现的目标

https://i.sstatic.net/e9xZa.jpg

我尝试了这个

jsfiddle.net/RUSm3/

但正如你所看到的，日期在图像上重叠。

所以我为日期

jsfiddle.net/9aw29/

添加了 left:215px它看起来不错，但也许我没有图像。如何让日期回到最左边？我试图在没有 php 的情况下实现这一目标。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

落花浅忆 2024-10-07 08:57:39

如果您有一个像这样的 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;
    }

您可以在此处验证其是否正常工作

If you have a div like this

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

with this css fragment your date div will be positioned to the bottom right of it's container.

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

You can verify it working here

回复收藏 0 原文

狼性发作 2024-10-07 08:57:39

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

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

I'm not sure what your markup is, but the easiest solution would be to have the heading, text and date all in one div (inside .entry), and float the image to the left if it's there. The date would be positioned as you have already done in your example. When there is no image, the entire div will move flush left.

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

回复收藏 0 原文

心凉怎暖 2024-10-07 08:57:39

这是我的想法，可能对您来说是一个很好的起点。简而言之，将两个文本区域包装在它们自己的 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>

Here is what I came up with and will probably be a good jumping-off point for you. In short, wrap the two text areas in their own divs, and wrap them in a parent div. Float the parent div to the right and make it's position something other than static. If the position is static, you cannot use the position: absolute attribute with it's children divs.

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

回复收藏 0 原文

~没有更多了~