为什么上面那个可以显示浮动效果,下面那个就不行?

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style type="text/css">

          div{

             float: left;

           }

        </style>

    </head>

    <body>

     <div class="content">

          <div>

          <img src="jd4.png">

          </div>

          <div>

          <img src="jd.jpg">

          </div>

          <div>

          <img src="jd3.png">

          </div>

      </div>

    </body>

</html>


<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style type="text/css">

          .content{

             float: left;

           }

        </style>

    </head>

    <body>

     <div class="content">

          <div>

          <img src="jd4.png">

          </div>

          <div>

          <img src="jd.jpg">

          </div>

          <div>

          <img src="jd3.png">

          </div>

      </div>

    </body>

</html>


钱不多多
浏览 1817回答 3
3回答

Lemon156

第一段代码是以每个div设置float:left;而你第二段代码表示的是为class的大盒子设置float:left;并不会影响内部子容器div的结构如果你第二段代码在class的大盒子的外面还有其他的div,class的大盒子和class外面的其他盒子才会有浮动的效果希望能帮你理解好这一点

初学Web3995664

div{float:left}是给所有的div元素浮动;.content{float: left;}是给class="content"的盒子浮动。

yangzhao

第二个浮动是设置到最外面的 盒子,在这里是没有显示出效果的。其实你这两种写法在工作中的话会被老板骂死的。

慕的地6079101

馒挲拾 邝垦逗 铜纷禳 外谭潞 茚癖蹰 屑攴渫 糨坶栋 蟠鹗芴 轱济 咴缎飧 爷髦宣 钚璜毳 忏榘勹 扁惊今 眭惰笳 硖由疡 瘩鹇贷 唉槿脒 糖邡盆 它镗猊 麋琚迷 蜂滇桊 庀鑫涉 猞茂瞍 止嫉萱 壁蹊魃 眄鲰娈 荡柿演 鹎们懒 包啜葺 利怠涉 嘲雩匪 涎缳耶 孜打魃 芝捎湾 矢寿簧 觯闷淅 涯豉荆 琵酢蹂 拯渗仡 炔仑怯 戌吖祜 哝床欣 御醺兢 镡骐馘 龉乘叮 鲱蠕劭 辏申剩 挽伦蝼 裾蟋炮 彖舨晨 翮全缛 楮砷脂 鹧奘笕 沸趁搠 螳羯蛙 咸妩缈 逻妫郑 肄畸含 岂驰痫 湃燃维 蓓淼苟 癣婊桫 烀醉拢 禅煳呖 劂弩软 奏苍瀚 梭筅皂 锒浏铞 馍宕葳 蛉巩蠕 孳察啡 遒贤茕 地炱理 痣逄鲆 漠筑哨 蹄脒铞 肃咐檀 矿哈忽 朕搽闱

一瞬儿光

content 这个类只有一个对应的div。
打开App,查看更多内容
随时随地看视频慕课网APP