Css 垂直对齐第二段至图像顶部_Css_Twitter Bootstrap

Css 垂直对齐第二段至图像顶部

css twitter-bootstrap

Css 垂直对齐第二段至图像顶部,css,twitter-bootstrap,Css,Twitter Bootstrap,我有以下代码。现在，标题与图像的垂直顶部对齐。但描述仍在图像下方环绕（阻止），我希望它也在顶部对齐，就在图像旁边的标题下方，就像标题一样，但同样在标题下方 .vtop { display: inline-block; vertical-align: top; float: none; } .padding-top-bottom-5 { padding-top: 5px !important;

我有以下代码。现在，标题与图像的垂直顶部对齐。但描述仍在图像下方环绕（阻止），我希望它也在顶部对齐，就在图像旁边的标题下方，就像标题一样，但同样在标题下方

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

.vtop
{
显示：内联块；
垂直对齐：顶部；
浮动：无；
}
.填充-顶部-底部-5
{
填充顶部：5px！重要；
填充底部：5px！重要；
}
没有
{
填充：0！重要；
}
.内联块
{
显示：内联块；
}

某物的名称


Lorem ipsum dolor sit amet，是一位杰出的献身者。酵母菌的发酵效率，蜗壳福西布直径nec。我是康格·米。做一件有效的事，莫利斯·普鲁斯在，元素。临时猫科动物保护协会。我是一个爱的人。莫里斯和图尔皮斯·鲁特姆，奥古斯·内克，阿利奎特·尼塞尔。前庭是同侧帆，而后庭则是舷侧帆。莫比坐在阿梅特·菲尼布斯·里苏斯和马克西姆·内克身边。Mauris酵母菌、大酵母菌和连续叶舌。

试试这个

.vtop
{
显示：内联块；
垂直对齐：顶部；
浮动：左；
右边距：20px；
}
.填充-顶部-底部-5
{
填充顶部：5px！重要；
填充底部：5px！重要；
}
没有
{
填充：0！重要；
}
.内联块
{
显示：内联块；
}



某物的名称



Lorem ipsum dolor sit amet，是一位杰出的献身者。酵母菌的发酵效率，蜗壳福西布直径nec。我是康格·米。做一件有效的事，莫利斯·普鲁斯在，元素。临时猫科动物保护协会。我是一个爱的人。莫里斯和图尔皮斯·鲁特姆，奥古斯·内克，阿利奎特·尼塞尔。前庭是同侧帆，而后庭则是舷侧帆。莫比坐在阿梅特·菲尼布斯·里苏斯和马克西姆·内克身边。Mauris酵母菌、大酵母菌和连续叶舌。

听起来你在追求一个叫做CSS的概念。它是专门为您提到的场景设计的；布局如下：

+---------+ ~~~~~~~~~~ ~~~~~
|         | 
|         | ~~~~~ ~~~~~ ~~~~
|         | ~~~~~~~~~ ~~~~~~
+---------+

您可以通过基本结构来实现这一点：

<div class="media">
    <img src="http://placehold.it/50x50" alt="" class="media__img" />
    <div class="media__body">
        <p>Title of Something.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sed voluptate unde rerum quasi quidem, praesentium odio. Necessitatibus quo, non unde repudiandae adipisci, et corrupti eius ipsa, tempore ex aut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sed voluptate unde rerum quasi quidem, praesentium odio. Necessitatibus quo, non unde repudiandae adipisci, et corrupti eius ipsa, tempore ex aut.</p>
    </div>
</div>

你知道解决问题的方法总是很多的。在我看来，这对我来说有点难理解到底发生了什么，因为你在剩下的标签中遗漏了很多css信息，但就我所见，我觉得你正在做很多工作，可能会做一些非常简单的事情。希望这不是太苛刻，我赞扬你的努力！我留下了css中没有引用的标记，所以它不会破坏您的代码，并且您可以轻松地粘贴它

您只需将图像向左浮动

.floatLeft

，然后在其旁边创建一个div，并留一个边距，以将包含以下标题/段落的

.content

div从浮动div中推出，因为浮动在网站的内容流中不包含“真实”空间

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .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;
                }

            .floatLeft {
                float:left;
                }

            .content {
                margin-left:210px;
            }
        </style>
    </head>

    <body>
        <div class="col-lg-9 well">
            <div class="row">
                <div class="col-lg-12 well nopadding">
                    <img class="floatLeft" src="http://www.lastmiracle.com/wp-content/uploads/10/The-engineering-in-Nature-200x200.jpg" />
                    <div class="content">
                        <p><span class="bold inline-block">Title of Something</span></p>

                        <p>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>
            </div>
        </body>
</html>


.vtop
{
显示：内联块；
垂直对齐：顶部；
浮动：无；
}
.填充-顶部-底部-5
{
填充顶部：5px！重要；
填充底部：5px！重要；
}
没有
{
填充：0！重要；
}
.内联块
{
显示：内联块；
}
.左{
浮动：左；
}
.内容{
左边距：210像素；
}
某物的名称
Lorem ipsum dolor sit amet，是一位杰出的献身者。酵母菌的发酵效率，蜗壳福西布直径nec。
我是康格·米。做一件有效的事，莫利斯·普鲁斯在，元素。猫科动物临时住所
索达莱斯教堂。我是一个爱的人。莫里斯和图尔皮斯·鲁特姆，奥古斯·内克，阿利奎特·尼塞尔。
前庭是同侧帆，而后庭则是舷侧帆。莫比坐在阿梅特·菲尼布斯·里苏斯和马克西姆·内克身边。毛里斯酵母
马格纳和叶舌

我不想使用
…但是让我尝试一下你在没有br的情况下所做的更改，并将其放入段落中。我想知道为什么如果我没有浮动，它会将描述向下推，以获得一种不太详细的方法来获得所需的结果。你应该实现我刚才发布的

媒体对象

概念。你为什么指定

显示：默认情况下，在
元素上阻塞？@steveax–你说得对，这不是必需的，只是偏好问题。在某些情况下，为了保持一致性，我更喜欢显式。例如，如果我是
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .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;
                }

            .floatLeft {
                float:left;
                }

            .content {
                margin-left:210px;
            }
        </style>
    </head>

    <body>
        <div class="col-lg-9 well">
            <div class="row">
                <div class="col-lg-12 well nopadding">
                    <img class="floatLeft" src="http://www.lastmiracle.com/wp-content/uploads/10/The-engineering-in-Nature-200x200.jpg" />
                    <div class="content">
                        <p><span class="bold inline-block">Title of Something</span></p>

                        <p>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>
            </div>
        </body>
</html>