css - 如何将帖子标题放在两列的表格中

Question

我想将帖子标题放在 2 列的表中。

例如：

-------------------------------
post tile 1   |  post title 2
-------------------------------
post title 3  |  post title 4
-------------------------------
post title 5  |  post title 6

我可以打印帖子标题，但如何将所有内容放在表格和列中。

这是我到目前为止写的代码。PS：我对博主主题开发了解不多

代码：

<b:section class='main' id='main' name='Main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>

    <b:includable id='main' var='top'>
       <b:include name='allposts'/>
    </b:includable>

    <b:includable id='allposts'>
        <b:loop var='thisPost' values='data:posts'>
            <h2>
                <a expr:href='data:thisPost.url'>   <data:thisPost.title/></a>
            </h2>
        </b:loop>
    </b:includable>

</b:widget>

标签： cssxmlblogger

Answer 1

您需要做的就是围绕标题创建一个容器元素并使用 CSSdisplay flex来布局表格

<b:section class='main' id='main' name='Main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>

    <b:includable id='main' var='top'>
        <b:include name='allposts'/>
    </b:includable>

    <b:includable id='allposts'>
        <div class="container">
            <b:loop var='thisPost' values='data:posts'>
                <h2>
                    <a expr:href='data:thisPost.url'><data:thisPost.title/></a>
                </h2>
            </b:loop>
        </div>
    </b:includable>

</b:widget>

CSS

.container {
   display: flex;
   flex-wrap: wrap;
}
h2 {
   flex: 1 0 45%;
}

结果

.container {
		display: flex;
		flex-wrap: wrap;
	}
	h2 {
		flex: 1 0 45%;
	}

<div class="container">
	
	    <h2><a href='#'>foo</a></h2>
	    <h2><a href='#'>foo</a></h2>
	    <h2><a href='#'>foo</a></h2>
	    <h2><a href='#'>foo</a></h2>
	    <h2><a href='#'>foo</a></h2>
	    <h2><a href='#'>foo</a></h2>
	    <h2><a href='#'>foo</a></h2>
	    <h2><a href='#'>foo</a></h2>
	
</div>