1

我试图为我编写的一些 web 服务做一个小仪表板，但是每当小部件中的文本中断时，小部件就会改变它的位置。

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;
 }

我在小提琴中重现了这个问题：
https ://jsfiddle.net/vbb6fhz0/1/

4

2 回答 2

0

如果要对齐框，请使用 float 以获得更好的结果。word-break 与对齐无关。

但在你的情况下，刚刚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>

于 2016-09-13T13:16:54.373 回答
0

工作休息没有什么不好，你应该尝试浮动

.widget{float:left;}
于 2016-09-13T13:07:43.697 回答