Шах Шах - 4 months ago 11
CSS Question

How to change this code to show blocks in-line?

I have php code:

<?php
function metro_page_card($page) {
$html = "\t<li>\n\t\t<a href=\"".get_page_link($page->ID)."\">\n";
$icon = get_post_meta($page->ID, "Icon", true);
$html .= "\t\t\t".wp_get_attachment_image($icon, array('96', '96'))."\n";
$html .= "\t\t\t<p>".$page->post_title."</p>\n";
$html .= "\t\t\tSome text\n";
$html .= "\t\t</a>\n\t</li>\n";
return $html;
}

//[child_pages]
function metro_child_pages() {
$id = get_the_ID();
$pages = get_pages(array('child_of' => $id));
$html = "<ul class=\"page_card_grid\">\n";

foreach($pages as $page) {
$html .= metro_page_card($page);
}

$html .= "</ul>\n";

return $html;
}

add_shortcode('child_pages', 'metro_child_pages');
?>


Rendered html source:



ul.page_card_grid li {
display: inline-block;
width: 200px;
height: 200px;
margin: 20px;
}

ul.page_card_grid li a {
display: inline-block;
color: #555;
width: 200px;
height: 200px;
padding: 20px 16px 16px 16px;
font-size: 16px;
text-decoration: none;
background-color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

ul.page_card_grid li a p {
margin: 8px 0 8px 0;
font-size: 20px;
text-align: center;
}

ul.page_card_grid li a img {
margin: 0 52px 0 52px;
}

ul.page_card_grid li a:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

<ul class="page_card_grid">
<li>
<a href="http://local/index.php/sample-page/child-page-1/">
<img width="96" height="96" src="http://local/wp-content/uploads/2016/05/ic-1-150x150.png" class="attachment-96x96 size-96x96" alt="ic_timetable" srcset="http://local/wp-content/uploads/2016/05/ic-1-150x150.png 150w, http://local/wp-content/uploads/2016/05/ic-1.png 256w" sizes="(max-width: 96px) 100vw, 96px" />
<p>Child page 1</p>
Some text
</a>
</li>
<li>
<a href="http://local/index.php/sample-page/child-page-2/">

<p>Child page 2</p>
Some text
</a>
</li>
</ul>





I want show these card in single line. If it hasn't enough screen space then a part of cards must move to new line and etc. But I have a very strange result at this moment.

enter image description here

How can I fix this bug?

P.S. I don't know maybe it's important but I need to all card area works like link (To the user can click in any place of card).

Answer

Try with vertical-align property to this element : ul.page_card_grid li

It fixed the issue :

ul.page_card_grid li {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  height: 200px;
  margin: 20px;
}

ul.page_card_grid li a {
  display: inline-block;
  color: #555;
  width: 200px;
  height: 200px;
  padding: 20px 16px 16px 16px;
  font-size: 16px;
  text-decoration: none;
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

ul.page_card_grid li a p {
  margin: 8px 0 8px 0;
  font-size: 20px;
  text-align: center;
}

ul.page_card_grid li a img {
  margin: 0 52px 0 52px;
}

ul.page_card_grid li a:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
<ul class="page_card_grid">
  <li>
    <a href="http://contedevel.local/index.php/sample-page/child-page-1/">
      <img width="96" height="96" src="http://contedevel.local/wp-content/uploads/2016/05/ic_timetable-1-150x150.png" class="attachment-96x96 size-96x96" alt="ic_timetable" srcset="http://contedevel.local/wp-content/uploads/2016/05/ic_timetable-1-150x150.png 150w, http://contedevel.local/wp-content/uploads/2016/05/ic_timetable-1.png 256w" sizes="(max-width: 96px) 100vw, 96px" />
      <p>Child page 1</p>
      Some text
    </a>
  </li>
  <li>
    <a href="http://contedevel.local/index.php/sample-page/child-page-2/">

      <p>Child page 2</p>
      Some text
    </a>
  </li>
</ul>