移动web——左边定宽右边自适应的布局（经典布局）写法

本文介绍了一种使用CSS实现左边定宽而右边自适应布局的方法。通过浮动左侧div并设置特定宽度，结合右侧div的overflow:hidden属性，可以轻松创建这种布局。

<!DOCTYPE html>

<head>

<title>左边定宽右边自适应的布局</title>

<style>

div:nth-child(1){

width: 100px;

background: pink;

height: 300px;

float: left;

}

div:last-child{

overflow: hidden;

}

</style>

</head>

<body>

<div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad architecto dolores enim eum, eveniet expedita facilis impedit incidunt labore nulla odit reiciendis repudiandae. Eligendi ipsa, mollitia officiis quo sapiente tenetur. Aliquam amet animi, at commodi consectetur consequuntur delectus eius enim error eum facilis fugit in ipsa ipsam labore laboriosam laborum magni maxime modi neque nesciunt nihil nobis numquam odit officiis possimus quia quidem quis ratione reiciendis rem reprehenderit sed sunt ullam ut vel vitae? Autem distinctio doloremque eaque illo numquam obcaecati quasi repellendus voluptate. At, consequuntur debitis delectus in obcaecati rem. Cumque eveniet molestias officia officiis! Dolor eius harum necessitatibus quo repellat sint vel. A amet autem beatae commodi cupiditate deserunt explicabo facilis fuga harum illo non officia optio perferendis, quaerat quisquam quo soluta temporibus ullam veritatis voluptates. Doloribus ex facere facilis, fugit ipsum odit praesentium quis? Aut cum dignissimos ducimus mollitia necessitatibus nihil nostrum officiis quod similique ut. Ab ad consectetur iste necessitatibus placeat! Consequatur dicta dolorem, explicabo itaque maiores non perferendis quo rem vero! Accusamus, assumenda dicta dolore doloremque, expedita illo ipsa molestias nam omnis optio sequi tempora voluptatem! Minima nam quibusdam quo rerum voluptates? A ad, autem beatae cupiditate delectus deserunt dignissimos doloribus, dolorum enim excepturi exercitationem fugiat fugit in ipsam ipsum maiores maxime mollitia nam numquam officiis porro, quae quas quibusdam quidem quisquam quo quod quos recusandae reiciendis saepe sapiente vel voluptatem voluptatum! Alias corporis, culpa nostrum numquam quas quod sint. Autem commodi consequuntur delectus, dolor eius eos error laudantium magnam minus modi odio recusandae rem, tempore? Alias illum impedit magnam nemo repudiandae! Earum facilis hic, minus modi nemo nulla voluptatum. Ad atque aut earum, et eum fuga harum in iure laboriosam molestias mollitia neque, nisi nobis numquam officiis quaerat quibusdam quidem ratione reprehenderit rerum saepe sapiente sed, similique soluta totam. Debitis earum placeat quae!

</div>

</body>

</html>