CSS自适应内容宽度示例

最新推荐文章于 2023-11-04 18:58:10 发布
最新推荐文章于 2023-11-04 18:58:10 发布
阅读量539 收藏
点赞数
分类专栏： Web前端 文章标签： css 自适应宽度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsjlnd/article/details/49680203
版权

CSS自适应内容宽度示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS自适应内容宽度示例</title>
<style>
.main{ width:300px; height:50px; position:absolute; background-color:#0FF; overflow:hidden;}
.main ul{ list-style:none; position:absolute; background-color:#00F; word-break:keep-all; white-space:nowrap;}
.main li{ display:inline; background-color:#F00;}
</style>
</head>
<body>
	<div class="main">
    	<ul>
        	<li>aaaaaaa</li>
            <li>bbb</li>
            <li>cccccccc</li>
            <li>ddddddd</li>
            <li>ffffff</li>
            <li>eeeeee</li>
            <li>hhhhhh</li>
            <li>gggg</li>
            <li>xxxxx</li>
        </ul>
    </div>
</body>
</html>


lsjlnd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html让整体缩放实现分辨率兼容,纯CSS实现不同分辨率下实现样式自适应
weixin_29349409的博客
06-02 1234
用户体验一直是SEO最注重的，一个好的网页设计能给用户带来舒适的体验。而很多用于SEO优化的网站，画面实在难看...为了优化而优化。如果移动端能自适应最好尽量少调用JS，提高网站打开速度。纯CSS实现PC浏览器(显示屏幕)或移动端浏览器宽度样式的自适应。将用到@media样式进行判断，不支持IE9以下版本，需要增加一个JS。一般我们设计网页的时候PC端宽度都在900-1400像素之间，移动端宽度在...
CSS流动布局-页面自适应
分享互联网的有趣知识~
03-08 4782
项目中经常会碰到页面自适应的问题，例如：商城的列表展示、分类列表展示等页面，本篇通过css的“流”来解决css的页面自适应问题。
CSS/SCSS/LESS和自适应布局/响应式布局详解
故里2130
02-13 2936
在开发前端的时候，界面布局尤为重要，要布局的非常合理，好看，css是必不可少的，然后是各种布局，使用这些布局，进行混合搭配，最终的目的都是开发一个完整的界面。前端的技术变化是五花八门的，也是群魔乱舞的，使用的方法更是层出不穷。所以本文收集了一些个人的观点，并且进行记录。好的布局不是一下能学会的，是需要大量的实战经验，上手很快，但是精通需要一定的时间才行。
CSS自适应有哪些方案？
ElvisSu的专栏
07-23 4011
【问】CSS自适应有哪些方案？ 【答】：除了less外，原生CSS自适应方案常用的有如下: @media媒介查询： @media screen and (max-width: 300px) { body { font-size: 20px } } rem，%，wh等动态单位 (如屏宽100px, 则以下运行结果都为width:20px) .div-box1 {width: 0.2rem} //根html设置font-size：100px .div-box2 {width: 20%} //直属父元素设置w
css宽高自适应
YY的博客
09-20 1万+
css宽高自适应
React根据宽度自适应高度的示例代码
01-21
有时对于响应式布局，我们需要根据组件的宽度自适应高度。CSS无法实现这种动态变化，传统是用jQuery实现。 而在React中无需依赖于JQuery,实现相对比较简单，只要在DidMount后更改width即可 Try on Codepen 需要...
CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码
11-20
1.flex: 0 1 auto (自适应) 2.text-overflow:ellipsis;(自动省略文字) overflow:hidden; white-space: nowrap; 完整的代码如下 // CSS 部分 .container { display: flex; } .pic { width: 100px; height: 100px;...
CSS实现宽度自适应宽高16:9的矩形的示例
01-18
前面我们讲了怎么做一个自适应宽高1:1的正方形 https://www.jb51.net/css/753385.html 现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度，假设... /* .box 矩形div，宽度是.wrap的百分百，这主要是为了方便
CSS实现一个自适应的正方形的方法示例
01-18
但是很多情况下，在移动端的设计里，图片的宽度随着不同的移动设备进行改变的，这个时候就需要用到自适应的正方形的实现。 下面介绍两种比较简单的实现方法： 方法一：CSS3 vw 单位，vw是相对于视口的宽度。视口被均...
CSS自适应布局实现子元素项目整体居中，内部项目左对齐
12-30
日常工作时，我们可能遇到这样一个布局：一个父元素框框（随着浏览器大小自适应宽度）里面有许多按钮，然后这些按钮（宽度固定）的整体需要在父元素内居中对齐，而按钮整体的内容又是从左往右排列。这里提供一个解决...
CSS响应式布局（自适应布局）
weixin_65607135的博客
09-15 1万+
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
如何使用CSS实现一个自适应等高布局？
官方推荐
08-29 7935
如何使用CSS实现一个自适应等高布局？
css 网页自适应方案 大屏自适应方案
海胆的博客
09-20 1万+
rem的方案对于1920及以上分辨率屏幕来说基本适用，但当切换到1366*768等小分辨率时，由于浏览器默认。写死的，也会出现超出画布的问题，因此衍生第二种方案： scale缩放。css 相对单位，相对于根元素的 font-size 值的大小。将设计到的单位转化为rem单位就可以实现等比例的自适应缩放。，所以会导致文字比理想效果更大， 而echarts生成的。直接计算每个像素在设计稿中占据的%来输出vw，rem。比例不对的情况下，画面可能会被压缩。一些图表的自适应方式需要特别处理。DataV 数据大屏。
CSS-宽高自适应
最新发布
2301_80864686的博客
11-04 3483
父元素不设置高度，默认的高度是被子元素撑开的，如果子元素添加浮动，父元素的高度会降低，这种降低的效果被称为高度塌陷—会影响布局。（2）如果添加了盒子模型，auto+数值=auto，不会把盒子撑大；（1）概念：元素不设置宽度，宽度默认是被子元素或者是文本撑开：width默认值为:auto。2、使用方法：用于动态的计算宽度和高度，里面有两个参数calc(参数1 - 参数2)/* 自适应宽度的盒子+盒子模型（外边距）仍然是自适应，不会被撑大 */（2）方法2：使用自适应的方法来完成两栏布局。
好程序员web前端培训分享HTMLCSS之宽高自适应
qq_35970166的博客
06-30 467
好程序员web前端培训分享HTMLCSS之宽高自适应，宽高自适应，网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是pc自适应。 自适应的优点： 元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。 宽度自适应 元素宽度设置为100%。（块元素宽度默认为100%） 或者不设置宽度（width）;（宽度是父元素的宽度） 高度自适应 1)自适应元素高度：height:auto;或者不设置;（是子元素撑开父元素的高
【前端】CSS3弹性布局（flex）、媒体查询实现响应式布局和自适应布局
karshey的博客
02-23 2138
【前端】CSS3弹性布局、媒体查询实现响应式布局和自适应布局
css3 - 一文详解 “自适应布局和响应式布局“ 超详细介绍及原理，以及适用场景！
高级前端工程师
02-03 2931
CSS响应式布局（自适应布局）CSS之布局系列--静态布局、流式布局、自适应布局、响应式，响应式和自适应的区别，响应式布局和自适应布局详解，响应式/自适应/流动布局，多屏自适应响应式布局方案，CSS 静态、流式、自适应、弹性、响应式布局。自适应设计与响应式网页设计的区别，前端常见的五种布局方案，CSS flex布局(弹性布局/弹性盒子)，CSS页面布局(超详解)，css布局教程，CSS 高级布局技巧，最全的CSS自适应布局总结，超详细常用css布局，一文详解CSS常见的五大布局，深入理解CSS布局(转)深入
css 识别屏幕大小自适应
热门推荐
FREEDOM
12-19 7万+
两种方法 （1）原生自适应 @media screen 表示当屏幕大于320px，并小于1156px是执行下面的css @media screen and (min-width: 320px) and (max-width: 1156px){ .site-bg-dl { position: fixed; height: 100%; widt
BFC神奇背后的原理
qq_43288110的博客
09-26 281
一、BFC定义 　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 　　 二、BFC布局规则 1.内部的Box会在垂直方向，一个接一个地放置。 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相...
vue+css自适应窗口
07-28
对于Vue和CSS的自适应窗口，你可以使用CSS的Flexbox布局和媒体查询来实现。 首先，在Vue组件的样式中，使用Flexbox布局来实现自适应。在父容器上设置`display: flex;`，并根据需要设置`flex-direction`、`justify-content`和`align-items`等属性来控制子元素的布局。 例如，如果你想要在水平方向上居中显示子元素，可以这样设置父容器的样式： ``` .parent-container { display: flex; justify-content: center; } ``` 接下来，使用媒体查询来根据不同的屏幕宽度调整布局。媒体查询可以根据屏幕宽度来应用不同的CSS样式。 例如，如果你想在窗口宽度小于768px时改变子元素的布局方式，可以这样设置媒体查询： ``` @media (max-width: 768px) { .parent-container { flex-direction: column; } } ``` 这样，当窗口宽度小于768px时，子元素将以垂直方向排列。 以上是一个简单的示例，你可以根据实际需求调整样式和媒体查询的设置。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值