您的位置:首页 > Web前端 > CSS

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐