css之左盒子固定,右盒子自适应的一种实现方式
2018-02-15 15:03
489 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>my</title> <style> div:nth-child(1){ width: 100px; background-color: pink; height: 300px; float: left; } div:last-child{ overflow: hidden; /*width: 100%;*/ } </style> </head> <body> <div></div> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus sequi mollitia odio iure eligendi et blanditiis atque, minima repudiandae saepe! Obcaecati distinctio rerum numquam modi sint deleniti quo veniam illum voluptatem perspiciatis. Animi dignissimos libero rem quae architecto ab, aut ducimus iste laboriosam, tempora! Incidunt molestiae perspiciatis, at. Nobis consequatur aliquid ducimus voluptas, laboriosam explicabo ut, odio sed dolor distinctio veritatis fugit dolores magnam ipsam iste similique a eos labore cumque saepe illum suscipit natus. Modi odit, quia, ab obcaecati cum maiores! Delectus nihil cum accusantium tempora voluptatem sed velit corrupti dicta voluptate porro eligendi, ducimus, accusamus quas tenetur, odio molestiae! Omnis tenetur debitis reiciendis quo possimus ipsum autem odit optio excepturi nulla porro, sint placeat! Blanditiis quaerat, tempora? Perspiciatis ducimus accusamus nam esse repudiandae, quibusdam ullam soluta aspernatur similique hic! Similique quos maxime sapiente, voluptatum, atque quaerat id rerum corrupti sed architecto, ut magni hic aliquam animi, distinctio perspiciatis. In doloremque assumenda vitae autem unde veritatis accusantium aperiam iure quia et hic cupiditate laudantium incidunt explicabo eos velit, blanditiis dolor sequi molestias quod repellat ad accusamus? Exercitationem, magnam consequuntur, mollitia repellat fugit eveniet cumque inventore ipsa deleniti nemo. Sunt minus iusto labore eveniet accusantium. Nostrum eius dolore perferendis suscipit quam ad accusantium odit veniam accusamus in soluta aspernatur laudantium, ipsa nisi necessitatibus voluptatum harum! Sit velit suscipit, praesentium dolor. Cupiditate consequuntur praesentium nulla laboriosam libero ex aliquid error nam adipisci necessitatibus tempore, iure cumque et, harum enim ab dolor molestias fugit mollitia dolorem eaque temporibus at! Aspernatur a adipisci nobis natus ad quod cum excepturi nesciunt ab eaque quia doloremque dignissimos, iure et sapiente error necessitatibus odio, itaque repellat officiis vel optio debitis quisquam! Quam adipisci, nemo aspernatur est ex debitis voluptatem esse, cum dicta rem modi soluta eveniet ad consectetur. Dolores rerum, commodi tempore? Dignissimos totam, atque quidem. </div> </body> </html>
相关文章推荐
- 通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
- CSS实现左侧固定宽度右侧自适应的固比布局
- 三种实现左右固定,中间自适应的三栏布局方式
- CSS实现自适应高度布局:头部底部固定,中间自适应铺满屏幕剩余高度,中间盒子里左盒子固定右盒子自适应宽度
- CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)
- 上下DIV固定,中间DIV自适应的HTML+CSS实现
- CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
- CSS 两列布局 之 左侧适应,右侧固定 3种方式
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
- 表格表头固定的一种实现方式
- css实现左栏固定右栏自适应,高度自适应的布局
- 总结几种实现右边宽度固定,左边宽度自适应的css布局
- CSS——实现两侧固定中间自适应的布局(PC)
- 不用图片纯css实现圆角的一种方式
- CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
- [CAQ4]ImageView宽度固定,高度自适应的实现方式
- jquery + css 实现div固定
- php实现"全局静态变量类"的一种实现方式
- 百度2017年暑假实习生编程题目(第二题)----2、页面调度 在计算机中,页式虚拟存储器实现的一个难点是设计页面调度(置换)算法。其中一种实现方式是FIFO算法。
- Android中实现短信发送的一种方式