实现三列布局

傷城~ 2022-07-28 04:30 291阅读 0赞

1：三布局中的左侧自适应，中间定宽，右侧自适应

![20160330182957083][]

<style>

.clearfloat\{  
        zoom:1;  
        \}  
        .clearfloat:after\{  
        display:block;  
        clear:both;  
        content:"";  
        height: 0;  
        line-height: 0;  
        visibility: hidden;  
        \}  
        .container\{  
          text-align: center;  
        \}  
        .leftbox\{  
          width:70%;  
          float: left;  
        \}  
        .mainbox\{  
          float: left;  
          margin-left:-100px;  
          width: 100px;  
          background: red;  
        \}  
        .submainbox\{  
          float: left;  
          width: 100%;  
        \}  
        .submainbox\_content\{  
          margin-right:100px;  
          background: lightgreen;  
        \}  
        .sidebox\{  
          width: 30%;  
          float: left;  
          background: yellow;  
        \}

</style>

<div class="container clearfloat">  
        <div class="leftbox clearfloat">  
          <div class="submainbox"><div class="submainbox\_content">次要内容区域</div></div>  
          <div class="mainbox">主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域</div>  
        </div>  
        <div class="sidebox">侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏</div>  
      </div>

[20160330182957083]: /images/20220727/d4177794ca5247eb8b3453a52aa51c11.png

发表评论取消回复

表情：

评论列表（有 0 条评论，291人围观）

还没有评论，来说两句吧...

相关阅读

相关关于页面的多种自适应布局——三列布局

简单结构1，列表在前，更多列表在中间，内容在后 1 <style type="text/css"> 2 .layout{ background-colo

小灰灰/ 2023年06月03日 09:57/ 0 赞/ 106 阅读

相关 CSS三列布局中间自适应

最新更新时间：2020年08月01日09:09:51 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：本文汇总了常见的六种布局方案

比眉伴天荒/ 2023年02月08日 14:30/ 0 赞/ 233 阅读

相关 CSS多种三列自适应布局实现

文章目录第一种：基于float实现第二种：基于position：absolute实现第三种：基于dis

迈不过友情╰/ 2022年11月09日 11:21/ 0 赞/ 409 阅读

相关 CSS实现三列图片等宽等间距布局

每个图片块左浮动,宽30%,左外边距2.5%: 100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5% <!DOCTYPE html

àì夳堔傛蜴生んèń/ 2022年09月23日 08:46/ 0 赞/ 249 阅读

相关垂直三列中间元素自动宽度布局

1.最常见的垂直三列布局 html代码： <body> <div id=""> <div> <div class="

左手的ㄟ右手/ 2022年08月08日 12:59/ 0 赞/ 42 阅读

相关实现三列布局

1：三布局中的左侧自适应，中间定宽，右侧自适应 ![20160330182957083][] <style> .clearfloat\{

傷城~/ 2022年07月28日 04:30/ 0 赞/ 292 阅读

相关 html5+css 三列布局

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <

心已赠人/ 2022年07月20日 15:27/ 0 赞/ 288 阅读

相关三列自适应布局(圣杯布局)

介绍简单来说就是页面分为左中右3个部分，其中左右两侧固定宽度，而中间部分自适应。实现假设每列的高度为150px，左列宽度为200px，右列宽度为

旧城等待，/ 2022年01月19日 22:25/ 0 赞/ 429 阅读

相关 CSS 常见两列布局、三列布局

一、两列布局：　方法一：采用position：absollute;并设置margin-left的值。 left{ position:absol

我会带着你远行/ 2021年12月14日 12:27/ 0 赞/ 457 阅读

相关三列布局

目录介绍浮动法定位法定位法和浮动法的区别介绍三列布局指的是两边两列定宽，中间的宽度自适应，不同于圣杯布局和双飞翼，是三列布局的

谁践踏了优雅/ 2021年07月24日 23:52/ 0 赞/ 512 阅读