使這種佈局的正確方法？

我正在學習網絡開發幾個月，現在我通常會遇到一些前端和用戶界面佈局問題。我經常在將元素完全放在我想要的位置時遇到困難。在這種情況下，我要麼使用相對值，要麼破壞網站的響應能力，要麼編寫一些在我看來就像黑客一樣的規則。使這種佈局的正確方法？

對於這個例子，讓我們考慮這個形象：

正如你可以看到，有一個引導的容器，全寬背景顏色，容器內的兩個經典元素和外部的圖像。
對於這種佈局，我會做類似如下：

<!-- /* MAIN WRAPPER --> 
    <div class="pull-right"> 
     <img src="/img/topright_image.PNG" alt="shape"> 
    </div> 
    <div class="bg-red"> <!-- Red background color. --> 
     <div class="container"> 
      <header class="row"> 
       <div class="hidden-sm hidden-xs col-sm-2" id="logo"> <!-- I'm using Bootstrap 3, IIRC there's a better way to do that in Bootstrap 4. --> 
        <img src="/img/logo.PNG" alt="logo"> 
       </div> 
       <div class="col-sm-6 col-sm-push-3" id="title"> <!-- First difficulty, how to make sure the title will always be centered without being relative to the logo and no matter its content? --> 
        <h1>Centered title</h1> 
       </div> 
      </header> 
     </div> 
    </div> 

    <div class="bg-green"> <!-- Multiple containers, just to have colored backgrounds at 100% width of the page. --> 
     <div class="container"> 
      <section></section> 
     </div> 
    </div> 
    <!-- MAIN WRAPPER */ -->

這是一個快速的草案，但你的想法。然後，CSS將爲頁眉和部分（300px和400px）實現任意高度，然後爲容器設置最大寬度。

如何正確地做到這一點？

（如果我想使標題有點上面的標誌是什麼;兩行之間）

來源

2017-04-13 Joubarbe

根據您需要支持的內容以及支持的嚴格程度，[Grid Layout]（http://caniuse.com/#search=grid）是一個不錯的選擇。 – Christoph

「適當」是相對的。這使得這個問題難以回答。使用只有 TBS，這個解決方案是我該怎麼做的。然而，我傾向於贊成flexbox比TBS更多，所以我可能會使用TBS容器來設置它（是的，這對容器是一種實現目標的有效方式。我以前使用過的另一種方法是box-shadows。兩種選擇都不是更好，但現在你知道了），然後將每行作爲flexbox處理，甚至只是簡單地使用浮動和居中。這不是一個非常沉重的佈局。

如果你正在學習如何做到「正確」，我會閱讀其他代碼。特別是對於TBS我推薦Start Bootstrap。它有一堆你可以看的TBS主題。看看代碼，看看他們是如何做的，看看你喜歡什麼，開始做。

最後，最終，你如何到達那裏並不重要[1]。這是一個可行的解決方案，我沒有看到任何明顯錯誤或駭人聽聞的事情。

它實際上很重要。但你似乎仍處於學習階段 [2]因此它並不重要一樣多，只要你願意保持開放的心態和正確的東西，因爲他們發現
我們都始終學習。

來源

2017-04-13 14:02:26 amflare

使這種佈局的正確方法？

回答

相關問題