Question

我正在尝试对齐div块。如果我静态地这样做，它工作正常。

ul {
  width:500px;
  display:block;
  text-align:justify;
  border:solid thin #000;
  padding:0;
}

ul li{
  display:inline-block;
  width:26%;
  height:150px;
  background:red;
  padding:0;
}

ul::after{
  content:"";
  width:100%;
  display:inline-block
}

<ul>
  <li></li>
  <li></li>
  <li></li>  
  <li></li>  
  <li></li>
  <li></li>
</ul>

但是，由于我拥有的数据来自php foreach，因此它不起作用，因为标记元素是浮动的，没有空格。

    ul {
      width:500px;
      display:block;
      text-align:justify;
      border:solid thin #000;
      padding:0;
    }

    ul li{
      display:inline-block;
      width:26%;
      height:150px;
      background:red;
      padding:0;
    }

    ul::after{
      content:"";
      width:100%;
      display:inline-block
    }

<ul>
  <li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

我可以用我在php中获取数据的方式来处理这个问题：

  foreach ($data as $list): ?>

但是，当我使用linux脚本命令运行php时，有时:符号会混淆linux命令。

有人可以帮我解决这个问题吗？

提前致谢。

Answer 1

你不能只做这样的事情：

ImmutableMap.Builder<String, Integer> builder = ImmutableMap.<String, Integer>builder();
builder.putAll(map1);
map2.forEach((k, v) -> {if (!map1.containsKey(k)) builder.put(k, v);});
ImmutableMap<String, Integer> map3 = builder.build();

我真的不明白列表是完整列表还是只是你想要在html tho中列出的值。

修改

如果您不介意div具有相同的高度 - ＆gt; http://jsfiddle.net/5o9u644u/

如果您希望它们保持相同的高度 - ＆gt; http://jsfiddle.net/rc3cfgo5/

Answer 2

根据文章A Complete Guide to Flexbox，我认为您只能使用 CSS Flexbox 解决此问题。

https://jsfiddle.net/1dduLyy0/2/

ul {
  width:500px;  
  text-align:justify;
  border:solid thin #000;
  padding:0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

ul li{
  display:flex;
  width:26%;
  height:150px;
  background:red;
  padding:0;
}

ul::after{
  content:"";
  width:100%;
  display:inline-block
}

希望这对你的问题是准确的。

祝你好运＆＃39;

修改 https://jsfiddle.net/1dduLyy0/3/

使3 li适合整行。

ul li{ width: calc(100%/3); height:150px; background:red; padding:0; }

text align justify对浮动元素不起作用

2 个答案: