什麼是創建這個HTML塊的正確方法

我很好奇最好的方式去正確創建我的網站組件，我說的是嚴格的HTML和CSS。我使用jQuery 3.1.1的Bootstrap 3。什麼是創建這個HTML塊的正確方法

我試圖創建一種3x3模式，將能夠正確地演示我的項目。所以我試圖創建一個單一的組件，我可以複製粘貼8次。

到目前爲止，我已經有了這個爲HTML

<div class="row"> 
       <div class="col-md-4 portfolio-work-workplate"> 
        <div class="row"> 
         <div class="col-md-12 ignore"> 
          <h2 class="portfolio-work-workplate-header">Booming Title</h3> 
         </div> 
        </div> 
        <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p> 
       </div> 
      </div>

這裏是SCSS

.portfolio-work-workplate{ 
    text-align: center; 
    height: 15vw; 
    background:green; 
} 

.portfolio-work-workplate-header{ 
    // display:flex; 
    // align-items: flex-start; 
    // background:blue; 
    // justify-content: center; 

} 

.portfolio-work-workplate-paragraph{ 
    top: 50%; 
    transform: translate(0,150%); 
// display: flex; 
// align-items: center; 
// text-align: center; 
}

我離開了我失敗的意見，因爲我試圖用Flexbox，就繼續往前跑成奇怪的問題，它基本上只有H2和P字面上的脖子和脖子，而我對他們做的任何事情都毫無意義，因爲他們沒有動。

這樣做的目的是創建的代碼看起來像一大塊[置頂：標題，底：有些話或日期]，我想包括的[]，因爲我想保持某種美感。

我想在一個巨大的容器中的4個不同部分創建它。兩邊是[]的邊，兩邊是頂端是標題，底部是文字或日期。但在過去的幾個小時裏，我幾次失敗了。

編輯：爲了澄清，我可以爲它創建一個基本的佈局，但我想要的是更高層次的東西。我很抱歉有任何混淆。這是單個組件的最終遊戲的image。

來源

2016-12-06 KrakenEXE

你爲什麼不使用表 –

*我說的是嚴格的HTML和CSS。我正在使用Bootstrap 3和jquery 3.1.1。* ... – connexo

@Bálint你看到表格數據嗎？ – connexo

您要查找的術語是grid。將該片段顯示爲全屏以查看網格。如果您希望網格永遠不會以較小的分辨率進入單列，則應該將col-sm-4類更改爲col-xs-4。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4 portfolio-work-workplate"> 
 
     <h2 class="portfolio-work-workplate-header">Booming Title</h2> 
 
     <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p> 
 
    </div> 
 
    <div class="col-sm-4 portfolio-work-workplate"> 
 
     <h2 class="portfolio-work-workplate-header">Booming Title</h2> 
 
     <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p> 
 
    </div> 
 
    <div class="col-sm-4 portfolio-work-workplate"> 
 
     <h2 class="portfolio-work-workplate-header">Booming Title</h2> 
 
     <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-sm-4 portfolio-work-workplate"> 
 
     <h2 class="portfolio-work-workplate-header">Booming Title</h2> 
 
     <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p> 
 
    </div> 
 
    <div class="col-sm-4 portfolio-work-workplate"> 
 
     <h2 class="portfolio-work-workplate-header">Booming Title</h2> 
 
     <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p> 
 
    </div> 
 
    <div class="col-sm-4 portfolio-work-workplate"> 
 
     <h2 class="portfolio-work-workplate-header">Booming Title</h2> 
 
     <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-sm-4 portfolio-work-workplate"> 
 
     <h2 class="portfolio-work-workplate-header">Booming Title</h2> 
 
     <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p> 
 
    </div> 
 
    <div class="col-sm-4 portfolio-work-workplate"> 
 
     <h2 class="portfolio-work-workplate-header">Booming Title</h2> 
 
     <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p> 
 
    </div> 
 
    <div class="col-sm-4 portfolio-work-workplate"> 
 
     <h2 class="portfolio-work-workplate-header">Booming Title</h2> 
 
     <p class="portfolio-work-workplate-paragraph">Lorem ipsum, ecks dee gaga enjoy memeius!</p> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-12-06 11:06:36

什麼是創建這個HTML塊的正確方法

回答

相關問題