Question

在second example上，为什么第二个div块从第一个inline-block的底部开始，但first example按预期工作？

＆＃13;

.working-left {
  background-color: green;
}

.working-right {
  background-color: red;
}

.left-panel {
  display: inline-block;
  width: 220px;
}

.right-panel {
  display: inline-block;
}

＆＃13;

First Example
<div>
  <div class="left-panel working-left">
    Working Left Panel
  </div>
  <div class="right-panel working-right">
    Working Right Panel
  </div>
</div>
<br><br>
Second Example
<div>
  <div class="left-panel">
    asd
  </div>
  <div class="right-panel">
    Drumstick boudin fatback hamburger, ground round pig porchetta. Tenderloin short ribs pork prosciutto meatloaf, strip steak ground round. Shoulder jerky biltong, t-bone shankle tri-tip venison boudin prosciutto leberkas turkey pancetta alcatra ham hock pastrami. Tenderloin ground round rump chuck boudin meatball capicola strip steak tail corned beef prosciutto short ribs tongue jerky. Brisket shankle prosciutto meatloaf porchetta jowl biltong cupim flank sirloin beef shoulder pork chop. Landjaeger brisket jowl, cupim buffalo spare ribs swine drumstick shoulder.
  </div>
</div>

＆＃13;

Answer 1

在第二个例子中，它没有足够的空间来陪伴它。

目前我已添加到“.right-pannel”类，然后两者将在同一行。

.working-left {
  background-color: green;
}

.working-right {
  background-color: red;
}

.left-panel {
  display: inline-block;
  width: 220px;
}

.right-panel {
  display: inline-block;
  width: 200px;
  vertical-align: top;
}

First Example
<div>
  <div class="left-panel working-left">
    Working Left Panel
  </div>
  <div class="right-panel working-right">
    Working Right Panel
  </div>
</div>
<br><br>
Second Example
<div>
  <div class="left-panel">
    asd
  </div>
  <div class="right-panel">
    Drumstick boudin fatback hamburger, ground round pig porchetta. Tenderloin short ribs pork prosciutto meatloaf, strip steak ground round. Shoulder jerky biltong, t-bone shankle tri-tip venison boudin prosciutto leberkas turkey pancetta alcatra ham hock pastrami. Tenderloin ground round rump chuck boudin meatball capicola strip steak tail corned beef prosciutto short ribs tongue jerky. Brisket shankle prosciutto meatloaf porchetta jowl biltong cupim flank sirloin beef shoulder pork chop. Landjaeger brisket jowl, cupim buffalo spare ribs swine drumstick shoulder.
  </div>
</div>

Answer 2

你必须限制＆＃34; 右面板＆＃34; 的宽度，以便将它对齐在＆＃34; 左面板＆旁边＃34; （使用＆＃34; display：inline-block＆＃34;是给出宽度等，而不是＆＃34; display：inline＆＃34;）

Answer 3

您为左侧面板设置了一个很好的宽度，但这意味着您应该为另一个设置宽度以使它们对齐，因为第二个右侧面板有很多文本，因此占用了所有空间。如果将文本缩小为第二个右侧面板上的一个单词，则与第一个示例相同。请查看以下链接了解详情：Display inline-block vs float

Answer 4

您还必须为right-panel指定width属性，否则它将需要宽度才能适合视图。使用%属性设置宽度（例如right-panel为20％，为left-panel设置为70％）或使用px精确设置宽度（如200px {对于right-panel，{1}}和400px。根据您的方便使用。

CSS - 内联块错位

4 个答案: