Question

我有以下Jade模板：

extends layout

block content
  h2 Characters and Portraits
  div(id="portraitsBox")
    - var portraits  = ["Clown-Fox", "Dragon-Bear", "Fish-Bear", "Deer-Wolf", "Salamander-Ant", "Side-Duck"];
    for filename in portraits
        - var url = "/images/portraits/" + filename.toLowerCase() + ".png"
        div(class="characterBox" id=filename)
          h3(class="characterName")= filename
          img(class="portrait" src= url)
  link(rel='stylesheet', href='/stylesheets/characters.css')

来自以下CSS：

#portraitsBox {
  border: 1px solid black;
  padding: 10px;
}

.characterBox {
  position: relative;
  padding: 5px;
  border: 1px solid black;
  width: 350px;
  display: inline;
}

.characterName {
  padding-top: 0px;
  width: 150px;
  font: Arial;
  text-align: center;
}

如果我取出display: inline，这样可以正常工作，但每次我尝试将它放回去时我都会得到这个垃圾：

http://www.orderofthemouse.co.uk/characters

容器div将自身调整为169.9px宽!!？

这里发生了什么？我使用Firebug进行了检查，看起来任何Bootstrap默认样式都没有超出我自己的CSS（它们在扩展布局文件中被调用）或类似的东西，并且没有据我所知，在级联中没有任何东西应该造成它。当我查看生成的HTML时，所有元素都按预期嵌套，这是我的下一个考虑因素，所以它似乎没有什么愚蠢的我忽略了......？

Answer 1

您想获得此结果：http://screencast.com/t/c06yM3cr

我很困惑，因为你说如果你禁用显示内联，它可以正常工作，当我尝试它们仍然显示为块时。

如果你想要的结果是我在sceenshot中的结果，你所要做的就是设置包装器#portraitsBox来显示：flex。

CSS / Jade / HTML：盒子不能正确内联

1 个答案: