CSS-内联块未对齐

Question

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

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

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

您必须限制“ 右面板”的宽度以使其在“ 左面板 ”旁边对齐（使用“ display：inline-block”是为了提供宽度等，与“ display：inline”不同）

Answer 3

您可以为左面板设置一个宽度，这很好，但是这意味着您应该为另一个面板设置一个宽度，以使它们对齐，因为第二个右面板上有很多文本，因此占用了所有空间。 如果在右第二个面板上将文本缩小为一个单词，您将获得与第一个示例相同的内容。 请查看以下链接以获取详细信息： 显示内联代码块与浮动块

Answer 4

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