首页网页设计一个横向排列的布局，使得左边留有一定的空白空间 css怎么写

网页设计一个横向排列的布局，使得左边留有一定的空白空间 css怎么写

时间: 2024-10-07 21:02:14 浏览: 30

创建一个网页设计中左侧留白、右侧内容横向排列的布局，你可以使用CSS的`float`, `margin`, 或者现代的`display: flex`或`grid`。这里是一个使用`float`的例子，假设你的HTML结构中有两部分：左侧`aside`和右侧`main`。 ```html <!DOCTYPE html> <html lang="zh"> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } /* 清除全局默认样式 */ body { min-height: 100vh; /* 设置最小视口高度 */ } .left-side { width: 30%; /* 左侧宽度占总宽度的30%，可以根据需要调整 */ float: left; background-color: lightgray; /* 预览时添加背景色便于区分 */ padding: 20px; } .right-side { width: 70%; /* 右侧剩余70%宽度 */ float: right; } /* 为了防止内联元素换行 */ .clearfix::after { content: ""; clear: both; display: table; } /* 为避免在小屏幕下布局问题，可以添加媒体查询 */ @media (max-width: 768px) { .left-side, .right-side { width: 100%; } } </style> </head> <body> <div class="clearfix"> <aside class="left-side"> 这是左侧留有空白的部分 </aside> <main class="right-side"> 这是右侧的主要内容 </main> </div> </body> </html> ```

阅读全文