Question

我在一些div justify-content中有一些多行文字，我很满意，直到其中一行文字换行，因为它的长度。当发生这种情况时，它会丢失body { margin: 0; font: 12pt Arial; } .print { border: 1px dotted; } .label { width: 2.2in; height: 1.2in; padding: 0.1in; display: inline-flex; justify-content: center; align-items: center; }并且div会从组中垂直错位。我试图保持标记/样式尽可能简单。解决这两个问题的最简单方法是什么？

<div class="print label">Joe Smith<br>1324 Anywhere Dr.<br>St. Charles, MO 63304<br></div>

<div class="print label">Johnny B. Goodfellowmasterfulman<br>5678 Anywhere Ave<br>St. Louis, MO 63144<br></div>

<div class="print label">Andrew Goodfellowmasterfulman<br>9110 Somewhere St<br>St. Louis, MO 63146<br></div>

<div class="print label">Joe Smith<br>1324 Anywhere Dr.<br>St. Charles, MO 63304<br></div>

{{1}}

Answer 1

由于您正在处理内联元素，请将vertical-align: top添加到div，然后它们将正确对齐。

＆＃13;

body {
  margin: 0;
  font: 12pt Arial;
}

.print {
  border: 1px dotted;
}

.label {
  width: 2.2in;
  height: 1.2in;
  padding: 0.1in;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: top;              /*  align at the top  */
}

＆＃13;

<div class="print label">Joe Smith<br>1324 Anywhere Dr.<br>St. Charles, MO 63304<br></div>

<div class="print label">Johnny B. Goodfellowmasterfulman<br>5678 Anywhere Ave<br>St. Louis, MO 63144<br></div>

<div class="print label">Andrew Goodfellowmasterfulman<br>9110 Somewhere St<br>St. Louis, MO 63146<br></div>

<div class="print label">Joe Smith<br>1324 Anywhere Dr.<br>St. Charles, MO 63304<br></div>

＆＃13;

如果您还添加word-break: break-all，则较长的文字可能会以更好看的方式中断

＆＃13;

body {
  margin: 0;
  font: 12pt Arial;
}

.print {
  border: 1px dotted;
}

.label {
  width: 2.2in;
  height: 1.2in;
  padding: 0.1in;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: top;           /*  align at the top  */
  word-break: break-all;         /*  added property    */
}

＆＃13;

<div class="print label">Joe Smith<br>1324 Anywhere Dr.<br>St. Charles, MO 63304<br></div>

<div class="print label">Johnny B. Goodfellowmasterfulman<br>5678 Anywhere Ave<br>St. Louis, MO 63144<br></div>

<div class="print label">Andrew Goodfellowmasterfulman<br>9110 Somewhere St<br>St. Louis, MO 63146<br></div>

<div class="print label">Joe Smith<br>1324 Anywhere Dr.<br>St. Charles, MO 63304<br></div>

＆＃13;

Answer 2

将所有.print .label div包装在父div中。设置父div的样式：flex;

这应该可以解决你的问题。

固定高度弹性框中的文本换行导致对齐，对齐问题

2 个答案: