布局问题，使用网格：SkeletonFramework

Question

我使用Skeleton框架，我使用网格系统进行布局是这样的：

<div class="container"> 
     <!-- columns should be the immediate child of a .row --> 
     <div class="row"> 
      <div class="three columns"> 
       <br> 
      </div> 
      <div class="six columns" style="margin-top: 25px"> 
       <img src="img/okay.jpg" width="50px" style="display:inline"/> 
       <p id="title" style="display:inline">{{title}}</p> 
       <p id="excerpt" style="display:inline">{{description}}</p> 
       <div id="describe me" style="display:inline"><span style="display:inline">{{name}}</span><span style="display:inline">{{date}}</span></div> 
      </div> 
      <div class="three columns"> 
       <br> 
      </div> 
     </div> 
    </div> 

它显示了这样的事情：

但我想要的是这样的：

这是如何实现的？

结果：

Answer 1

回应你的代码，虽然也有可能甚至在他们的文档这么多的替代解决方案。

1. 首先，尽量避免使用内联样式。

2. 将您的内容包装到 类中。

3. Vetical将图像对齐到顶部。

4. 删除段落项目上的默认边距 。

.desc { 
 
    display: inline-block; 
 
} 
 

 
.desc p { 
 
    margin-bottom: 0; 
 
} 
 

 
.six img { 
 
    vertical-align: top; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <!-- columns should be the immediate child of a .row --> 
 
    <div class="row"> 
 
    <div class="three columns"> 
 
     <br> 
 
    </div> 
 
    <div class="six columns"> 
 
     <img src="http://placehold.it/50x75" width="50px" /> 
 
     <div class="desc"> 
 
     <p id="title">{{title}}</p> 
 
     <p id="excerpt">{{description}}</p> 
 
     <div id="describe me"><span>{{name}}</span><span>{{date}}</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="three columns"> 
 
     <br> 
 
    </div> 
 
    </div> 
 
</div>