`
qq351943923
  • 浏览: 9801 次
社区版块
存档分类
最新评论

子div在父div的底部

    博客分类:
  • html
 
阅读更多

其实就是子div   postion:relative  ;bottom  :0px   

relative是相对父组件   而absolute 当父组件没有position时以浏览器为标准(这个网上看的-自己试试看对不对)

 

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 

<style>

#a{width:200px;height:200px;background:red;position:relative;margin:auto;}

.b{color:white;position:absolute;right:20px;bottom:0px;}

</style>

<body>

 

<div id="a">

<ul>

<li class="b">位于底部</li>

</ul>

</div>

 

</body>

</html>

 

分享到:
评论

相关推荐

    DIV局底部对其DIV局底部对其

    DIV局底部对其DIV局底部对其DIV局底部对其DIV局底部对其DIV局底部对其

    滚动条到底部弹出div

    在网页设计中,"滚动条到底部弹出div"是一种常见的交互效果,它通常用于实现无限滚动、加载更多内容或显示底部菜单等场景。这个功能是通过JavaScript和CSS结合实现的,下面我们将详细探讨如何实现这个效果。 首先,...

    将div内容滚动保持在最底部

    将div内容滚动到div的最有一行,类似于qq聊天窗口。

    让div滚动条初始化到最低位置的三种方法

    在前端开发中,有时我们需要实现一个功能,即在向某个特定的`div`容器内添加新内容后,使该`div`的滚动条自动滚动到最底部,以确保新添加的内容能够立即呈现在用户的视线范围内。本文将详细介绍三种实现这一目标的...

    div静止底部Demo.rar

    - 如果你想让这个`div`元素在窗口滚动时始终保持在视口底部,可以将它的顶部与浏览器窗口的底部对齐(`position: fixed;`,`bottom: 0;`)。 示例代码: ```css .parent { position: relative; } .sticky-...

    纯css控制div保持在浏览器底部

    纯css控制div保持在浏览器底部

    div内容自动滚动,自动生成随机颜色

    使用JavaScript,可以监听内容的变化,然后调整`div`的高度使其始终保持滚动到底部。例如,以下是一个简单的JavaScript代码示例: ```javascript function scrollToBottom() { var div = document.getElementById...

    JS实现div圆弧

    2. **JavaScript动态调整**:在某些情况下,可能需要通过JavaScript动态地改变div的`border-radius`值,以实现动画效果或响应式设计。这可以通过获取元素的引用,然后修改其style对象的`borderRadius`属性来完成。 ...

    CSS+DIV布局内容不满一屏时页底始终固定在底部_无横滚条_多浏览器兼容

    1.网上有个转烂的帖子介绍了一个兼容IE5以上IE7以下的解决方案。例子不仅乱码,而且IE8下不兼容,继续浮动。 2.网上还有个转烂的帖子介绍了一个全部IE兼容但是有横向滚动条的解决方案。 3.本例子解决了以上1和2两点...

    CSS+DIV固定底部的漂浮导航条(多浏览器兼容)

    在网页设计中,创建一个固定在页面底部的漂浮导航条是常见的需求,它能确保用户在滚动页面时始终保持导航可见,提供便捷的导航功能。本文将深入探讨如何使用CSS和DIV来实现这样一个多浏览器兼容的固定底部导航条。 ...

    让div圆角显示

    2. **顶部和底部圆角**:`.rtop` 和 `.rbottom` 定义了顶部和底部圆角的基本框架,其中包含多层嵌套的`&lt;div&gt;`元素,每个子`&lt;div&gt;`都代表一个圆角部分。 3. **圆角实现**: - `.r1` 至 `.r4` 分别设置了不同的左右...

    DIV始终浮动在页面底部

    在Web开发中,让一个DIV元素始终浮动在页面底部是一个常见的需求,尤其在制作页脚信息或者导航菜单时。页面底部的元素通常需要随着页面滚动而保持在窗口的底部,而不是随着页面内容的滚动而移动。实现这一效果可以...

    漂亮div层 精美div层

    - **布局管理**:Div层是网页布局的基础,可用来分隔不同部分的内容,如头部、主体和底部。 - **样式控制**:每个Div层可以单独设置样式,实现内容的独立展示和个性化设计。 - **响应式设计**:在构建响应式网站...

    Div+CSS 样式的使用演示

    例如,我们可以在一个网页中使用多个div来划分头部、主体和底部等不同部分。 CSS在网页设计中的重要性不言而喻,它使我们可以将样式与内容分离,提高代码可读性和重用性。在Div+CSS布局中,我们可以设置div的属性,...

    css将div层固定显示在页面底部不随滚动条滚动

    在实际应用中,使用上述代码可以将一个div元素(在这里具有id "totop")固定在页面的底部右侧。例如,假设我们有如下HTML结构: ```html &lt;div id="totop"&gt; &lt;!-- 这里可以放置返回顶部的按钮或其他内容 --&gt; 返回...

    悬浮固定DIV悬浮固定DIV

    这段JavaScript代码首先获取了窗口的滚动位置和Div的高度,然后在滚动事件触发时,调整Div的position为fixed,使其相对于窗口定位,并计算出Div的新top值,以确保它始终保持在视口的底部。 通过这样的实现,我们...

    DIV+CSS布局实例

    在`2c-hd-ft-fixed`的实例中,我们通常会创建三个主要的`DIV`:一个用于头部(hd),一个用于主要内容(content),另一个用于底部(ft)。以下是基本实现步骤: 1. **创建结构**:在HTML中,为每个部分创建对应的`...

    div+css电子网站模板

    在本模板中,`div`常被用来创建各种布局区域,如头部、主体、侧边栏和底部等。通过设置`div`的类或ID,我们可以为每个部分赋予独特的样式,实现模块化设计,便于管理和维护。 **2. css样式表** `css`(Cascading ...

    怎样使div中的文字在div的底部显示实现样式

    在这个Flexbox示例中,`.container` 的子元素将会被放置在其底部角落。 总的来说,要使div中的文字在div的底部显示,可以通过设置合适的`line-height`并结合`overflow:hidden`来解决IE6的兼容性问题。而在现代...

    页面框架div+css代码

    - 主体(Main Content):主要内容区域,可能包含多个子 `div`,如文章列表、产品展示等。 - 侧边栏(Sidebar):提供额外信息或功能,如广告、搜索框等。 - 底部(Footer):通常包含版权信息、联系链接等,也是...

Global site tag (gtag.js) - Google Analytics