flexbox

    0熱度

    1回答

    我試圖在網站上構建團隊成員列表。而且(總是)這個人有一個非常長的職位,推動他的工作描述下載。 這造成了與其他工作描述不一致,設計師對此非常不情願。 我迄今發現的唯一的解決辦法是在職位描述限制在3線,: font-size: 10px; height: 30px; line-height: 1; 但是,現在還沒有,如果職位變爲4線長的錯誤證明。此外,較小的屏幕甚至可能會將短文本換成長度超過4

    0熱度

    2回答

    使用引導4 ... 假設我有以下的柔性排一個di​​v中,有字體真棒圖標在每個圖標下面的每個port-item和一個小文本實例。我想垂直和水平居中在他們的父母port-item div中的字體真棒圖標和文本,我的2小時值得付出的努力和搜索一直是徒勞的。 我想我已經在這個網站上搜索了大約15個主題並且什麼也沒有得到。我認爲我的設置是獨一無二的,因爲排列順序。 <div> <div clas

    0熱度

    2回答

    我有一個項目列表,其中每個項目被分成3個部分。 <li>[long part(1)] [separator(2)] [important part(3)]</li> 我想第一部分(「長部分」)截斷而不是換行。 我可以得到第一部分不包裝,而其他部分包裝 - 但我無法弄清楚如何讓瀏覽器截斷第一部分。 這裏有一個codepen例如:https://codepen.io/fiver/pen/rGRev

    0熱度

    1回答

    如何使用flexbox編寫此佈局? 有我的解決方案,但無法正常工作。我可以用CSS網格修復,但IE11不能正確支持。 您有任何建議/解決方案嗎? https://codepen.io/hamzaerbay/pen/KXJEWJ?editors=1100 <div class="box-wrapper"> <div class="box title">Web Developer, Desi

    2熱度

    1回答

    第一次玩Flex,經過大量的閱讀和玩,我還沒有設法解決這個問題。 我想要一個固定的導航欄。但這很容易,問題是如何將項目1對齊到項目2 & 3?不管我做什麼,他們都分組。 我確信你將能夠向我展示我的noob錯誤,所以我說對 - 謝謝你! .flex-container { display: -webkit-flex; display: flex; -webk

    0熱度

    1回答

    我想使這個菜單響應使用Flexbox和我不能爲我的生活看到我做錯了什麼。我希望菜單選項在移動視圖中彼此堆疊。使用Flex時我很好,但我無法找到這裏的錯誤。任何幫助表示讚賞! 這裏是對代碼的鏈接:code CSS: .tabs-menu { display: -webkit-box; display: -webkit-flex; display: -ms-f

    2熱度

    4回答

    我試圖垂直集中flex盒元素中的純文本。 我決定使用屬性display:table-cell與vertical-align: middle。但它似乎不能在Flexbox元素中正常工作。 我怎樣才能垂直集中它,理想情況下不使用包裝或定位,並仍然用橢圓截斷長文本? .container { width: 400px; height: 400px; font-w

    0熱度

    2回答

    我想在頁面的中心製作一個卡片顯示。當我把類進度嚮導放在一個像下面這樣的獨立div中。 <div class="progress-wizard" > <div fxLayout="row" fxLayoutAlign="center center"> <mat-card> <button mat-raised-button color="primary">Primar

    4熱度

    2回答

    我有一個簡單的網頁,其中有一個.topnav酒吧和一個.container,其中有幾個元素。我正在嘗試將.container(而不是.topnav)居中放置在頁面的body之內,以便它將垂直居中。然而,當我嘗試過的造型body有: display:flex; align-items:center; justify-content:center; 無論是.topbar和.container居

    0熱度

    2回答

    嘗試垂直對齊文本中心在以下卡: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQs