html - css 的内联 block 属性未按预期运行

Question

我试图在 1 个父 block 中放置 2 个 block 。

.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

<div class="parent" >
<div class="childleft"> </div>
<div class="childright"> </div>
</div>

以上作品。

但是以下将 childright 置于 childleft 之下。

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

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

编辑:这是无法正常工作的网页。 http://www.ablueheart.com/uncategorized/2013-11-13/test

Answer 1

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>

.

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