【HTML-进阶-如何实现父级块级元素宽度自适应子元素宽度】
背景
块级元素宽度默认值为100%,而不是auto;因此其宽度不会根据子元素内容动态适应。
如何实现父级元素宽度动态适应其子元素。
方法一 display:inline;
给块级元素设置inline-block值。
{
display: inline-block;
}
方法二 绝对定位元素
给块级元素设置position:absolute/fixed;
{
position:absolute; // fixed
}
方法三 浮动元素
{
float: left;// right
}
方法四 display:flex
//html
<div class="test">
hello,我是测试文字君。
</div>
.test{
display:flex;
}
【HTML-进阶-如何实现父级块级元素宽度自适应子元素宽度】的更多相关文章
- 父元素设置min-height子元素设置100%问题
问题:父元素设置min-height子元素高度设置100%取不到值,这是因为子元素 div设置 height:100%: 只有当父级元素满足min-height:1000px;设置的条件才触发: 浏览 ...
- jquery层级原则器(匹配父元素下的子元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?
最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
- CSS实现父元素半透明,子元素不透明
CSS实现父元素半透明,子元素不透明. 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明 ...
- CSS父元素高度随子元素高度变化而变化
<html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width: ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- css行级块级区别总结摘录
一.块级元素:block element 每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外).两个块级元素连续编辑时,会在页面自动换行显示.块级元素一 ...
- 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...
- 当fixed元素相互嵌套时,父元素会影响子元素的层叠关系,最好不要嵌套使用fixed
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...
随机推荐
- css3怎么分清伪类和伪元素
伪类用于向某些选择器添加特殊的效果. 伪元素用于将特殊的效果添加到某些选择器. 伪类有::first-child ,:link:,vistited,:hover,:active,:focus,:lan ...
- C# 按部门拆分excel文件
按照所属部门不同将excel文件拆分成多个文件 string excel_path = @"G:\zhyue\backup\2018-08-01 读取腾讯邮箱接口-获取一个月内未接收到外部邮 ...
- C语言——链式存储实现栈的基本运算算法
Lkstack.h // 链栈的定义 typedef struct node { int data; struct node *next; }LkStk; main.c #include <st ...
- 如何在Ubuntu上安装gcc-6.3
装显卡驱动推荐 gcc 6.3 版本,其实linux上多个版本的gcc是可以共存的,需要的的时候切换就好,参加之前的博客 https://www.cnblogs.com/jins-note/p/951 ...
- Conda常用命令整理
主要参考Anaconda官方指南Using Conda:https://conda.io/docs/using/index.html 环境:Win10 64bit with conda 4.3.14 ...
- Creating dynamic/configurable parameterized queries in Entity Framework
https://dillieodigital.wordpress.com/2013/05/09/creating-dynamicconfigurable-parameterized-queries-i ...
- python的enumerate函数
python的enumerate函数用于循环索引和元素 例如 foo = 'abc' for i , ch in enumerate(foo): print ch, '(%d)' % i 输出结果: ...
- 简说mvc路由
首先我们通过在Global.asax中的Application_Start将路由信息注册到RouteTable的Routes静态属性中.如下代码所示: public class RouteTable ...
- Java学习---传输安全设计
1.计算机安全的概念 用于保护数据和阻止Hacker的工具统称为计算机安全(Computer Security).信息安全最基本的方法就是利用加密信息防止未授权的人窃听,加密是以某种特殊的算法改变原有 ...
- 关于Oracle伪列rownum
rownum列跟rowid列不一样,虽然同为表的伪列.但是rowid列是列的一个固定属性,而rownum列是结果集的一个排序.所以像如下查询是不会返回结果的:select rowid,rownum,e ...