css多列布局(实例)

前言

  1. 一列布局
  2. 二列布局
  3. 三列布局

1 一列布局

  • 一列布局:

    HTML部分
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>一列布局</title>
    </head>
    <body>
    <div class="head">head</div>
    <div class="main">main</div>
    <div class="foot">foot</div>
    </body>
    </html>
    
    CSS部分
    div{text-align: center;}
    .head{height: 60px;background-color:#fae1e1;}
    .main{margin: 0 auto;height:300px;background-color:#e6686a;}
    .foot{margin: 0 auto;background-color:red;}
  • 效果图如下:

2 二列布局

  • 二列布局代码如下(即左右布局),二列布局有多种方法,float+margin(一侧定宽,一侧自动)、position+margin(一侧定宽,一侧自动)、float+负margin(一侧定宽,一侧自动)等,本篇用的是设定两栏的宽度的百分比,随宽度自适应变化代码如下:

    HTML部分
    <!DOCTYPE html>
    <html>
    <head>
    <title>二列布局</title>
    </head>
    <body>
    <div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
    </div>
    </body>
    </html
    
    CSS部分
    body{ margin:0; padding:0; font-size:20px; font-weight:bold}
    div{ text-align:center; line-height:50px}
    .main{ width:80%; height:400px; margin:0 auto}
    .left{ width:20%; height:400px; background:#e6686a; float:left}
    .right{ width:80%; height:400px; background:#fae1e1; float:right}
  • 效果图如下:

3 三列布局

  • 三列布局(即左中右布局),三列布局有多种方法,float+margin(两侧定宽,中间自适应)、position+margin(两侧定宽,中间自适应)、float+负margin(两侧定宽,中间自适应)、float+position+margin(两侧自动,中间定宽)、position+margin(两侧自动,中间定宽),本篇用的是float+margin(两侧定宽,中间自适应),代码如下:

    HTML部分
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
    <div class="left">left</div>
    <div class="center">main</div>
    <div class="right">right</div>
    </body>
    </html>
    
    CSS部分
    body{ margin:0; padding:0; font-weight:bold}
    div{ line-height:40px}
    .left{height:400px; width:200px; position: absolute; left:0; top:0;background:#fae1e1;}
    .right{ height:400px; width:200px; position:absolute; top:0;right:0;; background:#fae1e1}
    .center{ height:400px; margin:0 200px; background:#e6686a}
  • 效果图如下:

原文地址:https://www.cnblogs.com/nolaaaaa/p/8849187.html

时间: 2024-10-10 20:03:26

css多列布局(实例)的相关文章

div css三列布局效果实例代码

div css三列布局效果实例代码:三列布局在是比较中规中矩的布局之一,大量的网站都有应用,也是初学者必须要掌握的布局方式之一,下面就是一个三列布局的实例代码,仅供参考之用,希望对初学者有一定的帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

左边logo 右边广告图片布局 div css左右浮动布局实例

左边logo 右边广告图片布局(div css左右浮动布局实例) 一般网页头部是左边网站标志logo,右边为广告图片或电话号码图片,这里DIVCSS5为大家介绍对float浮动使用实例布局介绍. 需要div+css布局案例效果图需要div+css布局案例效果图(缩小)一.DIVCSS5实例布局技术点说明 - TOP 1.图片切出说明:首先切好左边logo图片,右边广告图片(切图注意不影响图片质量情况尽量宽度高度尺寸切小).2.采用float:left和float:right布局:一般遇到内容靠左

css两列布局,一边固定宽度,另一边自适应

<!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" />        <title>css两列布局,一边固定宽度,另一边自适应</title>    </head>    <style>        a, body, center, cite, code, dd, del, div, dl, dt, e

CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解

新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域. 这篇文章最早出现在the April 2012 issue (226)这期的.net杂志上-这杂志是面向网页设计者以及开发者,全球销量最高的杂志. 按照以往来说,用CSS来布局看起来总是一样非常繁杂的工作.然而,随着一个个新标准的推出,网页设计者已经能够实现非常轻松地进行布局工作了. 主流的浏览

CSS多列布局

1.多列等高布局 这种布局即每一列的高度保持一致,高度与最高的一列相同.等高布局是为了维护边框线条的完整性,在有些地方则可能是为了维护背景的完整性,达到整体一致不缺失的效果. 最常用的方法为padding补偿法: .container{ overflow:hidden; } .item{ float:left; width:100px; margin-right:10px; padding-bottom:10000px; margin-bottom:-10000px; } <div class=

CSS两列布局

在布局中,我们常常需要出现两列的情况,其中左边一列固定宽度,右边一列随着浏览器宽度变化而变化.如何实现呢? 传统的方法是利用float将左部分浮动起来,再通过margin将右部分右移,得到所需效果,代码如下: <!--两列布局,其中左侧固定,右侧自适应--> <div class="left background-color-red height-60 width-300"></div> <div class=" background

css 两列布局的多种实现方式及原理。

两列布局是非常常见的需求在实际项目中,实现的方式也有很多.这里提供几种实现方式和原理.供大家参考 页面基本布局如下代码所示: 1 <div class="main"> 2 <div class='left'> 3 左侧 1 4 </div> 5 <div class='right'> 6 右侧 1 7 <div>假如div很多的话</div> 8 <div>假如div很多的话</div> 9

CSS三列布局

× 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中间自适应.两列定宽一侧自适应.中间定宽两侧自适应.一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中间自适应布局 思路一:  float [1]float + margin + calc <style> p{margin: 0;} .parent{overflow: hidden;} .left

div+css两列布局与三列布局

一.两列布局: 1.左边定宽,右边自适应. 方法一:采用position:absollute;并设置margin-left的值. 例: #left{ position:absolute; width:300px; top:0px; left:0px; background:#F00; } #right{ background:#0FC; margin-left:300px; } <div id="left">左边定宽</div> <div id="