Question

我想得到这种X字母组。

          X
     X
X         X
     X
X         X
     X
          X

这是我的HTML / CSS代码，它不能满足我的需要。

<div>
<div style="display:inline-block;vertical-align:middle">
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
</div>

<div style="display:inline-block;vertical-align:middle">
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
</div>

<div style="display:inline-block;vertical-align:middle">
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
</div>
</div>

有什么问题？谢谢你的帮助！

Answer 1

只需为间距添加一些余量：https://jsfiddle.net/e086qn3c/

CSS：

div div:first-child {
    margin-right: 20px;
}

Answer 2

Flex和margin也可以提供帮助，只需要2条规则/行的基础。列表示例：

/* basis */

/* parent */

ul {
  display: flex;
}
/* children */

li {
  margin: auto 1em;
}
/*reset li ================ */

li {
  display: block;
  /* reset list-item */
}

<ul>
  <li>
    <p>X</p>
    <p>X</p>
  </li>
  <li>
    <p>X</p>
    <p>X</p>
    <p>X</p>
  </li>
  <li>
    <p>X</p>
    <p>X</p>
    <p>X</p>
    <p>X</p>
  </li>
</ul>

对于旧浏览器，表格布局也会这样做（2rules，3lines）

ul {
  display: table;
}
li {
  display: table-cell;
  vertical-align: middle;
  padding:0 1em;
}

<ul>
  <li>
    <p>X</p>
    <p>X</p>
  </li>
  <li>
    <p>X</p>
    <p>X</p>
    <p>X</p>
  </li>
  <li>
    <p>X</p>
    <p>X</p>
    <p>X</p>
    <p>X</p>
  </li>
</ul>

最终内联块也是3行，2rules

ul {
  display: block;
}
li {
  display: inline-block;
  vertical-align: middle;
  padding:0 1em;
}

<ul>
  <li>
    <p>X</p>
    <p>X</p>
  </li>
  <li>
    <p>X</p>
    <p>X</p>
    <p>X</p>
  </li>
  <li>
    <p>X</p>
    <p>X</p>
    <p>X</p>
    <p>X</p>
  </li>
</ul>

<ul>，<li>，<p>可以是包含或不包含id的任何标记，class如果结构受到尊重。

Answer 3

我会将所有东西都包装在一个容器中，然后在容器以及包含X的各个div上使用flex。 Fiddle here.

.container {
  display: flex;
  flex-direction: row;
  justify-content:space-around;
  width: 10rem;
}
.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.parent div {
  margin: 8px 0;
}

<div class="container">

  <div class="parent">
  <div>X</div>
  <div>X</div>
  <div>X</div>
  </div>

  <div class="parent">
    <div>X</div>
    <div>X</div>
    <div>X</div>
    <div>X</div>
  </div>

  <div class="parent">
  <div>X</div>
  <div>X</div>
  <div>X</div>
  <div>X</div>
  <div>X</div>  
  </div>
</div>

CSS和定位一组div

3 个答案: