Html css的内联块属性未按预期运行

我试图在1个父块内放置2个块

.childright {
    margin: 5px;
    display: inline-block;
    vertical-align: top;
    background-color: #EEE;
    border-radius: 4px;
    height: 140px;
    width: 405px;
    position: relative;
}
.parent {
    display: inline-block;
    vertical-align: top;

    background-color: blue;
border-radius: 4px;
height: 150px;
width: 500px;
}
.childleft {
margin-bottom: 5px;
border-radius: 4px;
height: 60px;
width: 60px;
margin-left: 5px;
display: inline-block;
background-color: #EEE;
vertical-align: middle;
top: 50%;
transform: translateY(70%);
}

HTML

以上工作

但是下面将childright放在childleft下面

<div class="span2">
  <img class="span3" src="http://www.someimage.jpg" />
  <p class="span1"> Random text</p>
</div>

随机文本

你能告诉我这里出了什么问题吗？我是CSS新手

---

编辑：这是它不能正常工作的网页

依赖内联块会产生不确定的结果，因为标记之间的空格类似于边距，并且取决于字体大小或字母间距，.childright可能有也可能没有足够的空间

将此添加到css应该可以解决您的问题：

.childleft, .span3 { float:left; }
.childright, .span1 { float:right; }

---

在

span2

div中有一个额外的空白

p

标记，请将其删除

<div class="span2">
  <img width="60" height="60" src="http://i0.wp.com/www.ablueheart.com/wp-content/uploads/2014/11/Jose-Mourinho-thumb.jpg?w=474" class="span3"></p>
<p class="span1"> text I’m vertically aligned! Hi ho Silver, away!I’m vertically aligned! Hi ho Silver, away!I’m vertically aligned! Hi ho Silver, away! I</p>
</div>

文本我是垂直对齐的！嗨，嘿，西尔弗，走开！我是垂直对齐的！嗨，嘿，西尔弗，走开！我是垂直对齐的！嗨，嘿，西尔弗，走开！我

文本我是垂直对齐的！嗨，嘿，西尔弗，走开！我是垂直对齐的！嗨，嘿，西尔弗，走开！我是垂直对齐的！嗨，嘿，西尔弗，走开！我

我在类“span1”、“span2”、“span3”中做了一些修改，并在类“span3”中删除了属性“transform:translateY（70%）；”

.span3{
背景色：#eee；
边界半径：4px；
显示：内联块；
高度：60px；
边缘底部：5px；
左边距：0px；
宽度：60px；
}
第3分部{
左边距：5px；
利润率最高：41px；
}
.span2{
背景颜色：蓝色；
边界半径：4px；
显示：内联块；
高度：150像素；
垂直对齐：顶部；
宽度：500px；
}
.span1{
背景色：#eee；
边界半径：4px；
显示：内联块；
高度：140像素；
保证金：5px；
位置：相对位置；
垂直对齐：顶部；
宽度：405px；
}
第1分部{
左边距：5px；
}

文本我是垂直对齐的！嗨，嘿，西尔弗，走开！我是垂直对齐的！嗨，嘿，西尔弗，走开！我是垂直对齐的！嗨，嘿，西尔弗，走开！我

它工作正常。在JSFIDLE中解释你的问题。它工作正常，你期望什么？在这种情况下，一些现有的CSS肯定会干扰你的工作。这是它不工作的网页，不知道为什么？如果有人能看一下，那将是很大的帮助。干杯你的解决方案有效。不过，一个简单的问题是，我现有的p标签的底部留有余量：24px；我试着把保证金放在底部：0px！重要的；是的，没错，但这并没有推翻它。你知道怎么否定这个边距底部吗（它把childright推了24个像素。我会在晚上试试。如果这行得通，那就太好了。我没有任何额外的标签。很好的发现！在mozilla中，我也能看到标签。似乎有些空间被翻译成了标签（甚至在wordpress的代码视图中）.这解释了一切。

<div class="span2">
  <img width="60" height="60" src="http://i0.wp.com/www.ablueheart.com/wp-content/uploads/2014/11/Jose-Mourinho-thumb.jpg?w=474" class="span3"></p>
<p class="span1"> text I’m vertically aligned! Hi ho Silver, away!I’m vertically aligned! Hi ho Silver, away!I’m vertically aligned! Hi ho Silver, away! I</p>
</div>

<div class="span2">
  <img width="60" height="60" src="http://i0.wp.com/www.ablueheart.com/wp-content/uploads/2014/11/Jose-Mourinho-thumb.jpg?w=474" class="span3">
<p class="span1"> text I’m vertically aligned! Hi ho Silver, away!I’m vertically aligned! Hi ho Silver, away!I’m vertically aligned! Hi ho Silver, away! I</p>
</div>