CSS

Question

我正在尝试为我编写的一些网络服务做一个小仪表板，但是每当小部件中的文本中断时，小部件就会更改其位置。

CSS 看起来像这样：

#container {
   text-align: center;
   width: 100%;
   height: auto;
}

.widget {
   background-color: firebrick;
   margin: 1px;
   width: 200px;
   height: 200px;
   display: inline-block;
   text-align: center;
   word-break: break-all;
 }

我在 fiddle 中重现了该问题：
https://jsfiddle.net/vbb6fhz0/1/

Answer 1

工作休息没有什么不好，你应该试试 float

.widget{float:left;}

Answer 2

如果要对齐框，则使用浮动以获得更好的效果。分词与对齐无关。

但在你的情况下，vertical-align: middle 解决了对齐问题

#container {
  text-align: center;
  width: 100%;
  height: auto;
}

.widget {
  background-color: firebrick;
  margin: 1px;
  width: 200px;
  height: 200px;
  display: inline-block;
  text-align: center;
  word-break: break-all;
  vertical-align: middle;
}

<body>
  <div style="width: 100%; height:100%;">
    <div id="container">
      <div class="widget">
        <p>1dawdawdaegsergsergsrsrgrsddadawdadawdwdwbf</p>
      </div>
      <div class="widget">
        2wdadawdad
      </div>
      <div class="widget">
        3wadawdwdawda
      </div>
      <div class="widget">
        4dawdawdaw
      </div>

    </div>
  </div>
</body>

CSS - 分词改变元素位置

CSS - word-break changes element position

html

layout

word-break