當(dāng)前位置：
  1. 首頁(yè)
  2. 知識(shí)學(xué)院
  3. 建站指南
  4. 正文

兩個(gè)span在div內(nèi)一個(gè)居左一個(gè)居右結(jié)構(gòu)

把span當(dāng)作div來(lái)結(jié)構(gòu)結(jié)構(gòu)，讓一個(gè)span在div里居左，一個(gè)span在div內(nèi)居右，接納float浮動(dòng)機(jī)關(guān)。

一、癥結(jié)CSS代碼：

居左：float:left

居右：float:right

二、div內(nèi)組織span實(shí)例

實(shí)例說(shuō)明：一個(gè)div設(shè)置不一定寬度，再里面布置兩個(gè)span盒子，為了能看見(jiàn)span盒子可否靠左靠右布局，同時(shí)設(shè)置css邊框。

1、殘缺HTML代碼

span在div內(nèi)居左居右

#tcss{?width:400px;?overflow:hidden}
.left{?float:left;?width:180px;?border:1px?solid?#F00}
.right{?float:right;?width:200px;?border:1px?solid?#00F}

應(yīng)用span機(jī)關(guān)居左

使用span機(jī)關(guān)居右

應(yīng)用span著實(shí)與運(yùn)用div一樣布局，只不過(guò)標(biāo)簽一致罷了，運(yùn)用float豈論是span還是div均能實(shí)現(xiàn)框架結(jié)構(gòu)。

div css實(shí)例實(shí)現(xiàn)span在div內(nèi)居左與居右機(jī)關(guān)

三、總結(jié)

只管默認(rèn)環(huán)境下span不是塊元素，默認(rèn)不會(huì)獨(dú)占一行，看似沒(méi)有div那樣有獨(dú)有一行的特性，但列入了float浮動(dòng)屬性后其功用和div同樣了，能作為框架標(biāo)簽應(yīng)用，只不過(guò)一樣平常咱們運(yùn)用div來(lái)布局框架，而span機(jī)關(guān)小一小部分，字體潤(rùn)飾等來(lái)應(yīng)用。