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

我用小提琴复制了这个问题：
https://jsfiddle.net/vbb6fhz0/1/

Answer 1

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

.widget{float:left;}

Answer 2

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

但在你的情况下，只有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 - 分词更改元素位置

2 个答案: