Html 网格布局问题：SkeletonFramework

我使用的是框架，我使用网格系统制作的布局如下：

 <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>

它显示了如下内容：

 <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>

但我想要的是这样的：

 <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>

如何做到这一点

---

结果：

响应您的代码，尽管有许多替代解决方案，甚至可能在他们的文档中

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

将您的内容包装在 班级

将图像与顶部垂直对齐

删除默认边距 关于项目的段落

.desc{ 显示：内联块； } .描述p{ 页边距底部：0； } .6IMG{ 垂直对齐：顶部； }

{{title}

{{description}

{{name}{{date}

---

嗯，它也依赖于其他代码。我必须回复你发布的代码。在JSFIDLE中显示代码。没有其他代码。这是页面。我甚至还加了一句！重要提示：cssbutit不起作用。请创建一个JSFIDLE代码，以提供最新的输出。顺便说一句，你想要与我的答案中发布的布局相同的布局，对吗？你创建的布局在JSFIDLE中工作，但在其他方面不行。我将创建一个JSFIDLE并编辑这个问题。在这个问题上，表是更好的选择吗？