html 三列布局（兩列自適應，一列固定寬度）

原文:

html 三列布局（兩列自適應，一列固定寬度）

不做過多解釋：主要是記錄乙個完整的布局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。

不多少**奉上：

/*

*******************
*公共標籤樣式
*******************
*//*
********************
*main 外邊框自適應區域
**********************
*/.main 
/*title 標題 
*/.main-title 
/*********************
*頭部文號區：70px
**********************
*/.content_title 
/**********************
*區域塊設定
*********************
*/.area .area_left .area_center .area_right 
/**************************
*footer底部區域 
**************************
*/.footer 
/*提交 
*/.submit 
/*提交按鈕
*/.submit-btn 
/********************
*公共標籤預設屬性設定
>三列布局
title
>
<
link 
href
="~/content/css/styletemplate/index.css"
rel="stylesheet"
/>
head
>
<
body
>
<
div 
class
="main"
>
<
div 
class
="main-title"
>
div>
<
div 
class
="content"
>
<
div 
class
="content_title"
>
<
div 
class
="flleft padigleft_15"
>
<
span 
class
="fontbold"
>名稱/文號：
span
>
<
input 
class
="int"
value
="發文文號001"
/>
div>
div>
<
div 
class
="area"
>
<
div 
class
="area_left"
>左邊
div>
<
div 
class
="area_center"
>中間
div>
<
div 
class
="area_right"
>右邊
div>
div>
div>
div>
<
div 
class
="footer"
>
<
div 
class
="submit"
>
<
a class
="submit-btn"
onclick
="window.print()"
>
流程轉交
a>
div>
div>
body
>
html
>

html 三列布局（兩列自適應，一列固定寬度）

不做過多解釋 主要是記錄乙個完整的布局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。不多少 奉上 公共標籤樣式 main 外邊框自適應區域 main title 標題 main title 頭部文號區 70px content title 區域塊設定 area area left...

兩列布局 三列適應布局 兩列等高適應布局。

一.兩列布局 左側定寬 右側自適應。四種方法 flex position float和負外邊距 外邊距 1.使用flex.右側自適應區塊 左側定寬200px區塊 2.使用position，考慮了頁面優化，右側區域先載入。右側自適應區塊 左側定寬200px區塊 3.利用float和負外邊距 這裡的10...

兩列自適應布局

要求 1 兩個盒子在同一行 2 右邊的盒子需要佔滿剩下的空間 3 兩個盒子不能重疊 方式一 左側欄寬度不固定 兩列自適應布局title html,body wrap header container 父元素新增偽元素樣式清除浮動，處理float的子元素無法撐開父元素高度問題 clearfix aft...