阿里巴巴前端面試題 三列布局知多少?

2021-07-02 01:29:07 字數 1388 閱讀 7372

前幾天收到阿里前端的面試通知,整體面試比較順利,但是還是有個問題回答的不令面試官滿意。

本來面試都快結束了,該涉及的都涉及了,而且交談過程中比較輕鬆,面試官突然來了句你不是精通布局嗎,給你3個div,你讓他們一行單列布局,中間寬度自適應。

我腦門一轉心想這還不簡單嗎,於是在他的imac上從容的敲出如下**:

type="text/css">

body,div

#box

#middle

#left

#right

style>

head>

id="box">

id="middle">中部寬度自適應div>

div>

id="left">左側寬度固定div>

id="right">右側寬度固定div>

body>

然後給他解釋說把中間的那個div巢狀乙個div盒子,設定左右div的margin-left為負數設定中間的div寬度自適應。

他說很好做的很正確但是問我有沒有什麼辦法不巢狀其他的div,只用3個div進行布局。

我就說定位啪啪啪一大堆……

他不滿意的回答是可以實現問我還有沒有其他辦法,我當時眉頭一皺,確實沒有什麼更好的解決辦法,然後面試結束後我一直在想這個問題,百思不得其解。

後來問了一下360做前端的前輩,他說用flex

自己編寫**如下:

type="text/css">

body

.div1

.div2

.div3

style>

head>

class="div1">1div>

class="div2">2div>

class="div3">3div>

body>

確實實現了想要的效果,我想這應該才是當時面試官想考察的重點。

可惜人生沒有如果。

仔細研究了一下flex其實這樣也可以實現,

**如下:

type="text/css">

body

.col_1

.col_2

.col_3

style>

head>

class="col_1">111div>

class="col_2">222div>

class="col_3">333div>

body>

只不過display:box存在很多相容問題,而且自適應的話還是flex比較好,不得不說css3真的很強大,很雜亂,很多js多行**才能實現的現在css3一兩行**就實現了。

刨根問底了解每個標籤的來龍去脈以及瀏覽器相容問題才是前端開發的王道,前端之路,任重道遠。

阿里巴巴面試題

作業系統的任務排程 房間內有n 1個群眾,1個明星,群眾之間的認識情況未知,所有的群眾都認識這個明星,現在有乙個機器可以問乙個人是否認識另乙個人,效率為o 1 請設計乙個演算法在n個人中找出這個明星。前線戰場有n個戰士,每個戰士都掌握了一些情報,戰士之間的交流 比如打 可以交換雙方的情報。請設計乙個...

阿里巴巴面試題 指標

下面程式會輸出什麼結果?include include int main char pa a pa printf s n pa system pause return 0 答案 解析 char a 這一行 表示建立了乙個字元型的指標陣列a,陣列裡有三個元素。如下圖 陣列裡存了三個字元型指標,每個指標...

阿里前端面試題

總共六道題 題目可能記不清了,記不清的就講大意吧 1 這題就是讓你根據乙個 他把寫出來涉及到了,table tbody thead th rowspan colspan那些 我蛋疼的加了乙個tfoot.其實是有的 不知道有沒有用錯 但是要注意一點的就是,有一列用了rowspan的話 下面的tr中要少...