Question

我有以下html

<div class="post-inner"> <h3 class="post-header"><a class="post-title" href="http://www.yellowfishjobs.com/job/sales-representative/">Sales Representative</a></h3>
<p class="post-excerpt"></p><h4>Location: Belfast</h4>
<h4>Job Type: Full-time</h4>
<p> <a href="http://www.yellowfishjobs.com/job/sales-representative/#more-2222" class="more-link">(more…)</a></p>
</div>

显示如下：

销售代表
  地点：贝尔法斯特
  工作类型：全职
  （更多...）

我想像这样显示：

销售代表地点：贝尔法斯特工作类型：全职（更多......）

这样所有帖子都按列排列（即所有位置都在彼此之下）。

我之前从未使用过display：grid，所以这就是我尝试过的：

.listing_page .post-inner {
  display:grid;
  grid-template-columns: 300px 50px 50px 50px;
  grid-template-rows: 100px ;
}

.listing_page .post-inner h3 {grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: row1-start
  grid-row-end: 1}
.listing_page .post-inner h4:nth-child(1) {grid-column-start: 2;
  grid-column-end: 1;
  grid-row-start: row1-start
  grid-row-end: 1}
.listing_page .post-inner h4:nth-child(2) {grid-column-start: 3;
  grid-column-end: 1;
  grid-row-start: row1-start
  grid-row-end: 1}
.listing_page .post-inner p {grid-column-start: 4;
  grid-column-end: 1;
  grid-row-start: row1-start
  grid-row-end: 1}

但它似乎没有任何影响。任何人都可以指出我哪里错了吗？ - 另外，我想只用CSS做这个，而不改变任何HTML！谢谢！

Answer 1

这可能不是你真正想要的......但是通过我们拥有的信息，对所有子元素使用display: inline-block;工作正常：

＆＃13;

.post-inner > * { 
  display: inline-block; 
}

＆＃13;

<div class="post-inner"> 
  <h3 class="post-header"><a class="post-title" href="http://www.yellowfishjobs.com/job/sales-representative/">Sales Representative</a></h3>
  <p class="post-excerpt"></p><h4>Location: Belfast</h4>
  <h4>Job Type: Full-time</h4>
  <p> <a href="http://www.yellowfishjobs.com/job/sales-representative/#more-2222" class="more-link">(more…)</a></p>
</div>

＆＃13;

显然，如果您只需要定位这些项目，则可以创建一个帮助程序类（例如.inline-block）并将该帮助程序类应用于要内联显示的特定项目。

Answer 2

虽然您要求不更改HTML但我必须回答更改HTML：P：

  <table style="width=100%">
  <tr>
  <td width=25%>
  <div class="post-inner"> <h3 class="post-header"><a class="post-title" href="http://www.yellowfishjobs.com/job/sales-representative/">Sales Representative</a></h3></div>
</td>
<td width=25%>
  <p class="post-excerpt"></p><h4>Location: Belfast</h4>
  </td>
  <td width=25%>
<h1>Job Type: Full-time</h1>
</td>
<td width=25%>
<p> <a href="http://www.yellowfishjobs.com/job/sales-representative/#more-2222" class="more-link">(more…)</a></p>
</td>
</tr>
</table>
 </body></html>

使用网格设置h3 h4和p标签的样式

2 个答案: