ÉÏƪÖÐÌÖÂÛÁ˸÷ÖÖÒÑÓеIJ¼¾ÖʵÏÖ¡£×Ðϸ·ÖÎö¸÷ÖÖ²¼¾ÖµÄ¼¼ÊõʵÏÖ£¬¿ÉÒÔ·¢ÏÖÏÂÃæÈýÖÖ¼¼Êõ±»¾­³£Ê¹Óãº

  • ¸¡¶¯ float
  • ¸º±ß¾à negative margin
  • Ïà¶Ô¶¨Î» relative position

ÕâÊÇʵÏÖ²¼¾ÖµÄÈý¸ö×î»ù±¾µÄÔ­×Ó¼¼Êõ¡£Ö»ÒªÇÉÃî×éºÏ£¬²¢¼ÓÒÔÁé»îÔËÓ㬾ÍÄÜ¡°Æ´¡±³ö¸÷ÖÖ²¼¾ÖµÄʵÏÖ·½°¸¡£

³¢ÊÔ֮·

¿¼ÂÇÒÔÏÂDOM½á¹¹£º

<div id="page">
    <div id="hd"></div>
    <div id="bd">
        <div class="main"></div>
        <div class="sub"></div>
        <div class="extra"></div>
    </div>
   <div id="ft"></div>
</div>

ÀûÓø¡¶¯ÔªËصĸº±ß¾àÀ´¶¨Î»£º

    .main {
        float: left;
        width: 100%;
    }
    .sub {
        float: left;
        width: 190px;
        margin-left: -100%;
    }
    .extra {
        float: left;
        width: 190px;
        margin-left: -190px;
    }

ÕâÑùÎÒÃǵõ½Á˵ÚÒ»¸ö³¢ÊÔÒ³Ãæ pe_layout_example1.html.
¿ÉÒÔ¿´³ö£¬Í¨¹ý¼òµ¥µÄ¸º±ß¾à£¬ÒѾ­ÈÃsubºÍextra¶¨Î»µ½ÕýÈ·µÄλÖá£Ê£ÏµÄÎÊÌâÊÇÈçºÎÈÃmainÒ²¶¨Î»µ½ÕýÈ·µÄλÖá£

Ò»¸ö×ÔÈ»µÄÏë·¨ÊÇ£¬¸ømainµÄÈÝÆ÷#bdÌí¼Ópadding:

    #bd {
        padding: 0 230px 0 190px;
    }

Ч¹ûÇë¿´£º pe_layout_example2.html.
ÕâÑùÄÜÈÃmain¶¨Î»µ½ÕýÈ·µÄλÖ㬵«subºÍextraµÄλÖò»¶ÔÁË¡£ÕâÊÇÒ»¸ö˼¿¼µÄ¹Ø¿¨¡£¼ÈÈ»subºÍextraµÄλÖò»¶Ô£¬ÄǾÍÏë°ì·¨µ÷Õûµ½ÕýÈ·µÄλÖá£Ïà¶Ô¶¨Î»Â¡Öصdz¡£º

    .sub {
        float: left;
        width: 190px;
        margin-left: -100%;
        position: relative;
        left: -190px;     }
    .extra {
        float: left;
        width: 230px;
        margin-left: -230px;
        position: relative;
        right: -230px;     }

demoÒ³Ã棺 pe_layout_example3.html. ºÜÃ÷ÏÔ£¬Õâ¾ÍÊÇÊ¥±­²¼¾Ö£¡

×éºÏÕâÈýÖÖ»ù±¾¼¼Êõ£¬ÎÒÃÇ¿ÉÒÔ¼ÌÐø³¢ÊÔ¸÷ÖÖÏë·¨¡£±ÈÈçα¾ø¶Ô¶¨Î»²¼¾Ö£¨Õâ¸ö²¼¾Ö²»ÄÑÏëµ½£¬ÄѵÄÊǵÚÒ»¸öÏëµ½£©£¬ÀàËƵĻ¹ÓÐÄæα¾ø¶Ô¶¨Î»²¼¾Ö£¨Ïȶ¼Òƶ¯µ½×î×ó±ß£¬È»ºóÔÙmargin-rightÒ»¸ö¸öÒƹýÀ´£©µÈµÈ¡£

ÔÚ²»Ôö¼ÓÈκζîÍâ±êÇ©µÄ¼ÙÉèÉÏ£¬ÎÒ³¢ÊÔÁ˸÷ÖÖÏë·¨£¬µ«Ê¼ÖÕ¶¼Ã»ÕÒµ½ÍêÃÀµÄ²¼¾ÖʵÏÖ£¨Ê¥±­²¼¾ÖÊÇÎÒ¾õµÃËùÓÐÏë·¨ÖÐ×î½Ó½üÍêÃÀµÄ£©¡£

¼ÈÈ»²»Ìí¼Ó¶îÍâ±êǩʱ£¬ÍêÃÀ²¼¾ÖµÄʵÏÖÈç´ËÀ§ÄÑ£¬ÄÇÈç¹ûÔÊÐíÌí¼ÓÒ»¸ö¶îÍâ±êÇ©ÄØ£¿ÔÚÌÔ±¦UEDÄÚ²¿µÄ̽ÌÖÖУ¬¸ømainÔö¼ÓÁËÒ»²ã°ü¹ü£º

<div id="main" class="column">
      <div id="main-content">#main</div>
</div>

Àï²ãmain-contentµÄ×÷ÓþÍÊǽ«main¶¨Î»µ½ºÏÊʵÄλÖ㬲¢·½±ãÉèÖÃpaddingµÈÊôÐÔ¡£Ïëµ½´Ë´¦£¬¾ÍÏñÅ£¶Ù±»Æ»¹ûÔÒɵÁËÒ»Ñù£¬Ô­À´µÄmain¶¨Î»ÎÊÌâÓ­Èжø½â£º

<div id="page">
    <div id="hd"></div>
    <div id="bd">
        <div class="main">
            <div class="main-wrap"></div>         </div>
        <div class="sub"></div>
        <div class="extra"></div>
    </div>
   <div id="ft"></div>
</div>

CSS½öÐèÔö¼ÓÒ»ÐУº

.main-wrap {
    margin: 0 230px 0 190px;
}

demoÒ³Ã棺 pe_layout_example4.html.

Ò»ÇÐÈç´Ë¼òµ¥£¡³ýÁËÌí¼ÓÁËÒ»¸ö¶îÍâ±êÇ©£¬ÆäËü¸÷·½Ã棬±íÏÖ¶¼ºÜÍêÃÀ£¨ÊÔÁËÏÂIE5.5, ҲûÈκÎÎÊÌ⣩¡£Ä¿Ç°Ö»Óõ½Á˸¡¶¯ºÍ¸º±ß¾à£¬Èç¹ûÔÙÒýÈëÏà¶Ô¶¨Î»£¬»¹¿ÉÒÔʵÏÖÈýÀ¸²¼¾ÖµÄ¸÷ÖÖ×éºÏ£º

    .extra {
        float: left;
        width: 230px;
        margin-left: -100%;
        position: relative;
        left: 190px;     }
    .main-wrap {
        margin-left: 430px;     }

demoÒ³Ã棺 pe_layout_example5.html.

×Ðϸ²é¿´example5ºÍexample4µÄÔ´´úÂ룬¿ÉÒÔ·¢ÏÖDOM½á¹¹ÊÇÍêÈ«Ò»ÑùµÄ£¬½ö½öCSSÉÔÓв»Í¬¡£ÕâÒâζ×ÅHTML½á¹¹ºÍCSS²¼¾ÖÔÚÒ»¶¨³Ì¶ÈÉϽâñîÁË£¬ÎÒÃÇ¿ª·¢HTML´úÂëʱ£¬´ÓÄÚÈݳö·¢¼´¿É£¬ÎÞÐè¹ý¶àµÄ¿¼ÂDz¼¾Ö¡£ÕâÕýÊǽ¥½øÔöÇ¿ÔÚÇ°¶Ë¹¤×÷Á÷³ÌÉϵÄÌåÏÖ¡£

Èç¹û°ÑÈýÀ¸²¼¾Ö±È×÷Ò»Ö»´óÄñ£¬¿ÉÒÔ°Ñmain¿´³ÉÊÇÄñµÄÉíÌ壬subºÍextraÔòÊÇÄñµÄ³á°ò¡£Õâ¸ö²¼¾ÖµÄʵÏÖ˼·ÊÇ£¬ÏÈ°Ñ×îÖØÒªµÄÉíÌ岿·Ö·ÅºÃ£¬È»ºóÔÙ½«³á°òÒƶ¯µ½Êʵ±µÄµØ·½¡£Òò´ËÇëÈÝÐíÎÒ¸øÕâ¸ö²¼¾ÖʵÏÖÈ¡ÃûΪ˫·ÉÒí²¼¾Ö£¨Flying Swing Layout£©.

¾ÍÈçÉÏͼÖеÄÄñÓи÷ÖÖ×ËÊÆÒ»Ñù£¬ÀûÓÃË«·ÉÒí²¼¾Ö£¬ÎÒÃÇÒ²¿ÉÒÔʵÏÖ¸÷ÖÖ²¼¾Ö¡£ÕâÀïÓиö³¢ÊÔÒ³Ã棬ÀûÓÃË«·ÉÒí£¬ÊµÏÖÁËÒ»Ì×Õ¤¸ñ»¯²¼¾Öϵͳ¡£

Óŵã

  1. ʵÏÖÁËÄÚÈÝÓë²¼¾ÖµÄ·ÖÀ룬¼´EricÌáµ½µÄAny-Order Columns.
  2. main²¿·ÖÊÇ×ÔÊÊÓ¦¿í¶ÈµÄ£¬ºÜÈÝÒ×ÔÚ¶¨¿í²¼¾ÖºÍÁ÷Ìå²¼¾ÖÖÐÇл»¡£
  3. ÈκÎÒ»À¸¶¼¿ÉÒÔÊÇ×î¸ßÀ¸£¬²»»á³öÎÊÌâ¡£
  4. ÐèÒªµÄhack·Ç³£ÉÙ£¨¾ÍÒ»¸öÕë¶Ôie6µÄÇå³ý¸¡¶¯hack:_zoom: 1;£©
  5. ÔÚä¯ÀÀÆ÷ÉϵļæÈÝÐԷdz£ºÃ£¬IE5.5ÒÔÉ϶¼Ö§³Ö¡£

²»×ã

  1. mainÐèÒªÌí¼ÓÒ»¸ö¶îÍâµÄ°ü¹ü²ã¡£
  2. µÈ´ýÄãµÄ·¢ÏÖÓë·´À¡¡£

²¹³ä

Ë«·ÉÒí²¼¾ÖµÄÏë·¨ÓëʵÏÖÊÜÁËÊ¥±­²¼¾ÖºÍUEDÄÚ²¿ÌÖÂÛµÄPPTµÄÆô·¢¡£³¢ÊÔºó·¢ÏÖÒ»ÇÐÈç´Ë¼òµ¥£¬¶¼ÓеãÆæ¹ÖΪʲôÍøÂçÉÏһֱûÓÐÎÄÕÂÀ´²ûÊö¡£

ǰЩÈÕ×ÓÖ÷Òª¾«Á¦¶¼·ÅÔÚÁËÔĶÁALAÉϵÄÎÄÕ£¬Ã»ÔõôעÒâÆäËüÐÅÏ¢¡£×òÌì²Å×ÐϸÔĶÁEricµÄAny-Order ColumnsºÍAlexµÄOne True Layout, ·¢ÏÖÕâÖÖ˼·ºÍÏë·¨Ôç¾ÍÓÐÈ˳¢ÊÔ¹ýÁË¡£±ÈÈçEricÔ­ÎÄÖеÄÀý×ÓÊǶ¨¿íµÄ£¬µ«ÉÔ΢Ð޸ģ¬¾Í¿ÉÒÔÑÝ»¯ÎªË«·ÉÒí²¼¾Ö¡£AlexµÄOne True Layout, ¸øµÄÀý×Ó±»Ç½ÁË£¬¾Íһֱûϸ¿´£¬½ñÌì²ÅÕÒ´úÀí¹ýÈ¥ÃéÁËÒ»ÑÛ£¬Ò»Ãé²»Òª½ô£¬Ô­À´One True Layout¾ÍÊÇË«·ÉÒí£¬²»¹ýAlexÖ»Óõ½Á˸¡¶¯ºÍ¸º±ß¾à£¬Òò´ËûÓÐÌá¼°main - sub - extraÕâÖÖÅÅÁеÄʵÏÖ¡£

´ËÍ⣬ÖÐÎ绹ÓÐÒ»¸ö·Ç³£Õ𾪵ķ¢ÏÖ£ºAlessandroÔç×öÁËÒ»¸öºÜÏêϸµÄÒ³ÃæLayout Gala, ÁоÙÁË40ÖÖ²¼¾Ö£¬ÓõľÍÊÇË«·ÉÒí£¡

ÇɺÏÈÃÈËÓеã¾ÚÉ¥£¬µ«¸üÈÃÎÒ¸ßÐË¡£ÒòΪAlexºÍAlessandroµÄ¹¤×÷£¬Ö¤Ã÷ÁËÕâÖÖ²¼¾ÖµÄÆÕÊÊÐÔ¡£Òò´Ë²»ÓÃÏñ²ÉÓÃα¾ø¶Ô¶¨Î»²¼¾ÖʱһÑù£¬µÃµ£ ÐÄм¼Êõ´øÀ´µÄ·çÏÕ£¡¿ÉÒÔ˵£¬Ë«·ÉÒí²¼¾ÖÒѾ­ÊÇÒ»¸ö³ÉÊìµÄ²¼¾Ö£¬µ«ÒòΪAlexµÄ±»Ç½£¬ÒÔ¼°AlessandroµÄÐû´«Á¦¶È²»¹»£¬µ¼ÖÂÕâ¸ö²¼¾Ö±»ÎÒÖØР¡°·¢ÏÖ¡±ÁËÒ»´Î¡£ÌØ׫´ËÎÄ£¬²¢È¡ÃûΪ¡°Ë«·ÉÒí²¼¾Ö¡±£¬Ï£ÍûÕâ¸ö²¼¾ÖÄÜÈøü¶àµÄÈËÖªµÀ£¬²¢Ó¦ÓÃÓÚʵ¼ùÖС£