css - 将第二段垂直对齐到图像顶部

Question

我有以下代码。现在，标题与图像的垂直顶部对齐。但是描述仍然在图像下方环绕(遮挡)，我希望它也顶部对齐，就像标题一样位于图像旁边的标题下方，但又在标题下方。

    .vtop
    {
        display: inline-block;
        vertical-align: top;
        float: none;
    }
    .padding-top-bottom-5
    {
       padding-top: 5px !important;
       padding-bottom: 5px !important;
    }
    .nopadding 
    {
       padding: 0 !important;
    }
    .inline-block
    {
        display: inline-block;
    }

            <div class="col-lg-9 well margin-top-5 padding-top-bottom-5">
                <div class="row">
                    <div class="col-lg-12 well nopadding">
                        <p>
                            <img src="../../../Images/thumbs/206.jpg" class="vtop" />
                            <span class="bold inline-block">Title of Something</span>
                        </p>
                        <p class="vtop">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur fermentum velit, faucibus volutpat diam pretium nec. Praesent quis congue mi. Donec a nibh efficitur, mollis purus at, elementum lorem. Praesent tempor pharetra felis, vel consectetur lectus sodales nec. Suspendisse vel molestie dolor, id tincidunt eros. Mauris et turpis rutrum, sollicitudin augue nec, aliquet nisl. Vestibulum mattis ipsum velit, et convallis est mattis porttitor. Morbi sit amet finibus risus, et maximus neque. Mauris fermentum magna et ligula consectetur lobortis.
                        </p>
                    </div>
                </div>

Answer 1

试试这个

.vtop
    {
        display: inline-block;
        vertical-align: top;
        float: left;
    margin-right: 20px;
    }
    .padding-top-bottom-5
    {
       padding-top: 5px !important;
       padding-bottom: 5px !important;
    }
    .nopadding 
    {
       padding: 0 !important;
    }
    .inline-block
    {
        display: inline-block;
    }

<div class="col-lg-9 well margin-top-5 padding-top-bottom-5">
                <div class="row">
                    <div class="col-lg-12 well nopadding">
                        <p>
                            <img src="http://www.lastmiracle.com/wp-content/uploads/10/The-engineering-in-Nature-200x200.jpg" class="vtop" />
                            <span class="bold inline-block">Title of Something</span>
                            <br /><br />
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur fermentum velit, faucibus volutpat diam pretium nec. Praesent quis congue mi. Donec a nibh efficitur, mollis purus at, elementum lorem. Praesent tempor pharetra felis, vel consectetur lectus sodales nec. Suspendisse vel molestie dolor, id tincidunt eros. Mauris et turpis rutrum, sollicitudin augue nec, aliquet nisl. Vestibulum mattis ipsum velit, et convallis est mattis porttitor. Morbi sit amet finibus risus, et maximus neque. Mauris fermentum magna et ligula consectetur lobortis.
                        </p>
                    </div>
                </div>