css實(shí)現(xiàn)寬高不同的logo水平排列

原理

1.給logo外面套一個(gè)盒子(比如li)幕随,設(shè)置li的寬度為width: 9%衔瓮,高度為height:0;最重要的是設(shè)置li的padding-bottom:9%;position:relative;
2.里面的logo設(shè)置width: 100%;height: 100%;position:absolute;left:0;top:0;

代碼

html部分

<div class="box">
            <ul>
                <li><img src=""/></li>
                <li><img src=""/></li>
                <li><img src=""/></li>
                <li><img src=""/></li>
                <li><img src=""/></li>
                <li><img src=""/></li>
            </ul>           
        </div>

css部分

         .box{
            padding: 0 15px;
            }
            ul,li{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            ul{
                overflow: hidden;
            }
            li{
                float: left;
                width: 9%;
                height:0;
                margin:5px 0.5%;
                padding-bottom:9%;
                position:relative;
                border-radius:50%;
            }
            img{
                display: block;
                border-radius: 50%;
                width: 100%;
                height: 100%;
                position:absolute;
                left:0;
                top:0;
            }

最終效果圖

20171025180450.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末庙洼,一起剝皮案震驚了整個(gè)濱河市蔫磨,隨后出現(xiàn)的幾起案子祝拯,更是在濱河造成了極大的恐慌您没,老刑警劉巖厂僧,帶你破解...
    沈念sama閱讀 207,248評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件扣草,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)德召,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門白魂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人上岗,你說我怎么就攤上這事福荸。” “怎么了肴掷?”我有些...
    開封第一講書人閱讀 153,443評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵敬锐,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我呆瞻,道長(zhǎng)台夺,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,475評(píng)論 1 279
  • 正文 為了忘掉前任痴脾,我火速辦了婚禮颤介,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘赞赖。我一直安慰自己滚朵,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,458評(píng)論 5 374
  • 文/花漫 我一把揭開白布前域。 她就那樣靜靜地躺著辕近,像睡著了一般。 火紅的嫁衣襯著肌膚如雪匿垄。 梳的紋絲不亂的頭發(fā)上移宅,一...
    開封第一講書人閱讀 49,185評(píng)論 1 284
  • 那天,我揣著相機(jī)與錄音椿疗,去河邊找鬼漏峰。 笑死,一個(gè)胖子當(dāng)著我的面吹牛变丧,可吹牛的內(nèi)容都是我干的芽狗。 我是一名探鬼主播,決...
    沈念sama閱讀 38,451評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼痒蓬,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼童擎!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起攻晒,我...
    開封第一講書人閱讀 37,112評(píng)論 0 261
  • 序言:老撾萬榮一對(duì)情侶失蹤顾复,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后鲁捏,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體芯砸,經(jīng)...
    沈念sama閱讀 43,609評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,083評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了假丧。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片双揪。...
    茶點(diǎn)故事閱讀 38,163評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖包帚,靈堂內(nèi)的尸體忽然破棺而出渔期,到底是詐尸還是另有隱情,我是刑警寧澤渴邦,帶...
    沈念sama閱讀 33,803評(píng)論 4 323
  • 正文 年R本政府宣布疯趟,位于F島的核電站,受9級(jí)特大地震影響谋梭,放射性物質(zhì)發(fā)生泄漏信峻。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,357評(píng)論 3 307
  • 文/蒙蒙 一瓮床、第九天 我趴在偏房一處隱蔽的房頂上張望盹舞。 院中可真熱鬧,春花似錦纤垂、人聲如沸矾策。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至逃糟,卻和暖如春吼鱼,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背绰咽。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評(píng)論 1 261
  • 我被黑心中介騙來泰國(guó)打工菇肃, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人取募。 一個(gè)月前我還...
    沈念sama閱讀 45,636評(píng)論 2 355
  • 正文 我出身青樓琐谤,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親玩敏。 傳聞我的和親對(duì)象是個(gè)殘疾皇子斗忌,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,925評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評(píng)論 1 92
  • 各種純css圖標(biāo) CSS3可以實(shí)現(xiàn)很多漂亮的圖形旺聚,我收集了32種圖形织阳,在下面列出。直接用CSS3畫出這些圖形砰粹,要比...
    劍殘閱讀 9,476評(píng)論 0 8
  • 不會(huì)用代碼框唧躲,所以看著有些亂套,,弄痹,饭入,html部分 <!DOCTYPE html> 迅雷看看 ...
    這就是個(gè)帥氣的名字閱讀 1,525評(píng)論 0 0
  • 1、垂直對(duì)齊 如果你用CSS肛真,則你會(huì)有困惑:我該怎么垂直對(duì)齊容器中的元素谐丢?現(xiàn)在,利用CSS3的Transform毁欣,...
    kiddings閱讀 3,150評(píng)論 0 11
  • “莫傷庇谆,走吧”白凌直接走進(jìn)房間,看著莫傷帶著命令的語(yǔ)氣說道凭疮。 “去哪兒饭耳?”莫傷有氣無力的回應(yīng)著。 “出去啊执解,你整天...
    雨林木風(fēng)雪閱讀 98評(píng)論 0 0