Как поставить заголовок сообщения в таблице из двух столбцов - PullRequest
Новая
       6

Как поставить заголовок сообщения в таблице из двух столбцов

0 голосов
/ 23 сентября 2019

Я хочу поместить заголовок сообщения в таблицу из 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>

1 Ответ

1 голос
/ 23 сентября 2019

Все, что вам нужно сделать, это создать элемент контейнера вокруг заголовков и использовать CSS display 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>
...