htmlÔõôÈÃÁ½¸ödiv²¢ÅÅ
ÔõÑùÔÚ html ÖÐʹÁ½¸ö div ²¢ÅÅ£¿ÓÐÁ½ÖÖÒªÁ죺ʹÓø¡¶¯£¬Ê¹Óà float: left ÊôÐÔ½« div ÒƳöÎĵµÁ÷²¢ÑØÒ»²à¶ÔÆ롣ʹÓà flexbox£¬Ê¹Óà display: flex ºÍ justify-content: space-between ÊôÐÔ½« div ÎÞаµØÔÚÈÝÆ÷Öв¢ÅÅÂþÑÜ¡£
ÔõÑùÔÚ HTML ÖÐʹÁ½¸ö div ²¢ÅÅ
ÒªÔÚ HTML Öв¢ÅÅ°²ÅÅÁ½¸ö div ÔªËØ£¬ÓÐÁ½ÖÖÖ÷ÒªÒªÁ죺
1. ʹÓø¡¶¯
¸¡¶¯ÊÇÒ»¸ö CSS ÊôÐÔ£¬ÔÊÐíÔªËØ´ÓͨË×ÎĵµÁ÷ÖÐÒƳö²¢ÑØ×ÅÒ»²à¶ÔÆ롣ҪʹÓø¡¶¯²¢ÅÅ°²ÅÅÁ½¸ö div£¬ÇëʹÓÃÒÔÏÂÑùʽ£º
Á¬Ã¦Ñ§Ï°¡°Ç°¶ËÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»
div { float: left; width: 50%; }
µÇ¼ºó¸´ÖÆ
2. ʹÓà flexbox
flexbox ÊÇÒ»ÖÖ¸üÏÖ´úµÄ CSS ½á¹¹Ä£¿é£¬ËüÌṩÁËÒ»ÖÖÎÞаÇÒÇ¿Ê¢µÄ·½·¨À´¿ØÖÆÔªËصĽṹ¡£ÒªÊ¹Óà flexbox ²¢ÅÅ°²ÅÅÁ½¸ö div£¬ÇëʹÓÃÒÔÏÂÑùʽ£º
div { display: flex; justify-content: space-between; width: 100%; }
µÇ¼ºó¸´ÖÆ
Ñ¡ÕªÒªÁì
ʹÓÃÄÄÖÖÒªÁìÈ¡¾öÓÚÄúÏîÄ¿µÄÏêϸÐèÇ󡣸¡¶¯ÊÇÒ»ÖÖ¼òÆÓÇÒÆÕ±éÖ§³ÖµÄÊÖÒÕ£¬µ«ËüÓÐʱ»á±¬·¢ÒâÏë²»µ½µÄЧ¹û¡£flexbox ÊÇÒ»ÖÖ¸üÎÞа¡¢¸üÇ¿Ê¢µÄÑ¡Ïµ«Ëü¿ÉÄܲ»¼æÈÝËùÓÐä¯ÀÀÆ÷¡£
ʾÀý
ÒÔÏÂÊÇÒ»¸öʹÓà flexbox À´²¢ÅÅ°²ÅÅÁ½¸ö div µÄ HTML ºÍ CSS ʾÀý£º
<div id="container"> <div id="item1">ÄÚÈÝ1</div> <div id="item2">ÄÚÈÝ2</div> </div>
µÇ¼ºó¸´ÖÆ
#container { display: flex; justify-content: space-between; width: 100%; } #item1, #item2 { width: 50%; }
µÇ¼ºó¸´ÖÆ
ÔÚÕâ¸öÀý×ÓÖУ¬ÈÝÆ÷ div ±»ÉèÖÃΪ flexbox£¬²¢Ê¹Óà justify-content: space-between ÊôÐÔ½«×Ó div ƽ¾ùÂþÑÜÔÚÈÝÆ÷ÖС£×Ó div ÉèÖÃΪ 50% µÄ¿í¶È£¬Òò´ËËüÃǽ«Õ¼ÓÐÈÝÆ÷µÄÒ»°ë¿Õ¼ä²¢²¢ÅÅÅÅÁС£
ÒÔÉϾÍÊÇhtmlÔõôÈÃÁ½¸ödiv²¢ÅŵÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡