×ðÁú¿­Ê±

htmlÔõô×óÓҽṹ

ʹÓà css£¬html ÖпÉͨ¹ýÒÔÏÂÒªÁìʵÏÖ×óÓҽṹ£ºfloat£ºÔªËظ¡¶¯£¬ÊµÏÖ²¢ÅÅÏÔʾ¡£flexbox£º½á¹¹ÎÞа£¬ÇáËÉʵÏÖ×óÓҽṹ¡£Ñ¡ÕªÒªÁìÈ¡¾öÓÚ¼æÈÝÐÔÐèÇóºÍ½á¹¹ÖØƯºó£ºfloat£º¼æÈÝÐÔ½ÏÈõ£¬½á¹¹¼òÆÓʱʹÓá£flexbox£º¼æÈÝÐԽϺ㬽ṹÎÞаÇÒ´úÂë¼òÆÓʱʹÓá£

HTML ×óÓҽṹµÄÒªÁì

ÔÚ HTML ÖУ¬Ê¹Óà CSS ¿ÉÒÔʵÏÖÔªËصÄ×óÓҽṹ¡£ÒÔÏÂÏÈÈÝÁ½ÖÖ³£¼ûµÄÒªÁ죺

1. float

float ÊôÐÔ¿ÉÒÔʹԪËØÔÚÒ³ÃæÖи¡¶¯£¬´Ó¶øʵÏÖÔªËز¢ÅÅÏÔʾ¡£

Á¬Ã¦Ñ§Ï°¡°Ç°¶ËÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»

<div style="float: left; width: 200px;">×óÀ¸ÄÚÈÝ</div>
<div style="float: right; width: 200px;">ÓÒÀ¸ÄÚÈÝ</div>

µÇ¼ºó¸´ÖÆ

2. flexbox

flexbox ½á¹¹Ê¹ÔªËؾßÓкÜÇ¿µÄÎÞаÐÔ£¬¿ÉÒÔÇáËÉʵÏÖÔªËصÄ×óÓҽṹ¡£

<div style="display: flex;">
  <div style="flex: 1;">×óÀ¸ÄÚÈÝ</div>
  <div style="flex: 1;">ÓÒÀ¸ÄÚÈÝ</div>
</div>

µÇ¼ºó¸´ÖÆ

½ÏÁ¿

ÌØÕ÷ float flexbox
¼æÈÝÐÔ ½Ï²î£¬IE6-7 ²»Ö§³Ö ½ÏºÃ£¬IE10+ Ö§³Ö
½á¹¹ÎÞаÐÔ ½ÏµÍ ½Ï¸ß
´úÂëÌÜд ÖØ´ó Ïà¶Ô¼òÆÓ

Ñ¡Ôñ

ƾ֤ÏêϸÐèÇ󣬿ÉÒÔÑ¡ÔñÒÔÏÂÒªÁ죺

float: ¼æÈÝÐÔÎÊÌâ²»ÑÏÖØÇҽṹÐèÇó¼òÆÓʱ¡£

flexbox: ¼æÈÝÐԽϺᢽṹÎÞаÇÒ´úÂëÌÜд¼òÆÓʱ¡£

ÒÔÉϾÍÊÇhtmlÔõô×óÓҽṹµÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡

ÃâÔð˵Ã÷£ºÒÔÉÏչʾÄÚÈÝȪԴÓÚÏàÖúýÌå¡¢ÆóÒµ»ú¹¹¡¢ÍøÓÑÌṩ»òÍøÂçÍøÂçÕûÀí£¬°æȨÕùÒéÓë±¾Õ¾Î޹أ¬ÎÄÕÂÉæ¼°¿´·¨Óë¿´·¨²»´ú±í×ðÁú¿­Ê±ÂËÓÍ»úÍø¹Ù·½Ì¬¶È£¬Çë¶ÁÕß½ö×ö²Î¿¼¡£±¾ÎĽӴýתÔØ£¬×ªÔØÇë˵Ã÷À´ÓÉ¡£ÈôÄúÒÔΪ±¾ÎÄÇÖÕ¼ÁËÄúµÄ°æȨÐÅÏ¢£¬»òÄú·¢Ã÷¸ÃÄÚÈÝÓÐÈκÎÉæ¼°ÓÐÎ¥¹«µÂ¡¢Ã°·¸Ö´·¨µÈÎ¥·¨ÐÅÏ¢£¬ÇëÄúÁ¬Ã¦ÁªÏµ×ðÁú¿­Ê±ÊµÊ±ÐÞÕý»òɾ³ý¡£

Ïà¹ØÐÂÎÅ

ÁªÏµ×ðÁú¿­Ê±

13452372176

¿É΢ÐÅÔÚÏß×Éѯ

ÊÂÇéʱ¼ä£ºÖÜÒ»ÖÁÖÜÎ壬9:30-18:30£¬½ÚãåÈÕÐÝÏ¢

QR code
¡¾ÍøÕ¾µØͼ¡¿¡¾sitemap¡¿