显示：内联块将元素定位在[重复]下方

This question already has an answer here:

这个问题在这里已有答案:

My inline-block elements are not lining up properly 5 answers

我的内联块元素没有正确排列5个答案

I have an extremely basic side by side layout which I'm trying to achieve however it seems to be pushing the element down.

我有一个非常基本的并排布局,我试图实现,但它似乎是推动元素。

JSFiddle - https://jsfiddle.net/ca616067/1/

.whitebox {            
    background-color: #fff;            
    height: 200px;   
    display: inline-block;        
}

I have fixed it by using;

我用它来修复它;

Display:inline-block;
position:relative;
top:-185px;

Is there a better way to fix this problem?

有没有更好的方法来解决这个问题?

4 个解决方案

#1

You can use vertical-align on your block level elements to bring them in alignment with each other.

您可以在块级元素上使用vertical-align来使它们彼此对齐。

You can view this in this fiddle

你可以在这个小提琴中查看

#2

Both the image and .whitebox are inline-level boxes in the same line box.

图像和.whitebox都是同一行框中的内联级别框。

Therefore, their vertical alignment is specified by the vertical-align property:

因此,它们的垂直对齐由vertical-align属性指定:

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

此属性会影响由内联级元素生成的框的线框内的垂直定位。

By default, its value is baseline:

默认情况下,其值为baseline:

Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

将框的基线与父框的基线对齐。如果框没有基线,请将底部边距边缘与父级基线对齐。

Since the image does not have a baseline, its bottom margin edge will be aligned with the baseline of .whitebox. That baseline is calculated according to

由于图像没有基线,因此其下边距边缘将与.whitebox的基线对齐。该基线是根据计算的

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

“内联块”的基线是正常流程中其最后一个线框的基线,除非它没有流入线框或者其“溢出”属性具有“可见”以外的计算值,在哪种情况下,基线是底部边缘边缘。

Therefore, you can

因此,你可以

Change the vertical alignment of the image and .whitebox, e.g.

更改图像和.whitebox的垂直对齐方式,例如

img, .whitebox {
  vertical-align: middle;
}

body {
  background-color: #F2F2F2;
}
h3 {
  font-family: sans-serif;
  text-align: center;
  color: #535353;
}
.forR {
  width: 980px;
  padding-left: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  padding-left: 10px;
}
.inline {
  display: inline;
  position: relative;
}
.whitebox {
  background-color: #fff;
  height: 200px;
  display: inline-block;
}
.box1 {
  width: 737px;
}
img {
  height: 200px;
  width: 200px;
  margin-right: 10px;
  display: inline-block;
}
img, .whitebox {
  vertical-align: middle;
}

<h3>Name</h3>
<div class="forR">
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png">
  <div class="whitebox box1">
    <p class="inline">Name: Matthew</p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
  </div>
</div>

Make sure .whitebox has no in-flow line box, so that the baseline of .whitebox will be its bottom margin edge. That is, the contents should be out of flow:

确保.whitebox没有插入行框,因此.whitebox的基线将是其下边距边缘。也就是说,内容应该是不流动的:

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow.

如果一个元素浮动,绝对定位或者是根元素,则该元素被称为流出。如果元素不在流程外,则称其为in-flow。

So for example you can use float: left:

所以例如你可以使用float:left:

.whitebox > * {
  float: left;
}

body {
  background-color: #F2F2F2;
}
h3 {
  font-family: sans-serif;
  text-align: center;
  color: #535353;
}
.forR {
  width: 980px;
  padding-left: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  padding-left: 10px;
}
.inline {
  display: inline;
  position: relative;
}
.whitebox {
  background-color: #fff;
  height: 200px;
  display: inline-block;
}
.box1 {
  width: 737px;
}
img {
  height: 200px;
  width: 200px;
  margin-right: 10px;
  display: inline-block;
}
.whitebox > * {
  float: left;
}

<h3>Name</h3>
<div class="forR">
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png">
  <div class="whitebox box1">
    <p class="inline">Name: Matthew</p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
  </div>
</div>

Set the overflow of .whitebox to something different than visible, so that the baseline of .whitebox will be its bottom margin edge.

将.whitebox的溢出设置为不同于可见的值,以便.whitebox的基线将是其下边距边缘。

For example, overflow: hidden:

例如,overflow:hidden:

.whitebox {
  overflow: hidden;
}

body {
  background-color: #F2F2F2;
}
h3 {
  font-family: sans-serif;
  text-align: center;
  color: #535353;
}
.forR {
  width: 980px;
  padding-left: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  padding-left: 10px;
}
.inline {
  display: inline;
  position: relative;
}
.whitebox {
  background-color: #fff;
  height: 200px;
  display: inline-block;
}
.box1 {
  width: 737px;
}
img {
  height: 200px;
  width: 200px;
  margin-right: 10px;
  display: inline-block;
}
.whitebox {
  overflow: hidden;
}

<h3>Name</h3>
<div class="forR">
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png">
  <div class="whitebox box1">
    <p class="inline">Name: Matthew</p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
  </div>
</div>

#3

Sure! In this case, you can use CSS float: left; as below and in this updated fiddle:

当然!在这种情况下,您可以使用CSS float:left;如下所示,在这个更新的小提琴中:

.inline {
    display: inline;    
    position: relative;
    float:left;
}

#4

Not sure what it is but it seems to fix itself once you remove all the paragraphs with class of inline.

不知道它是什么,但是一旦你用内联类删除所有段落它似乎自我修复。

<div class="whitebox box1"></div>

http://codepen.io/anon/pen/MwORMe

#1