什么是创建这个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块的正确方法

回答

相关问题