Question

我有以下代码。现在，标题在图像的垂直顶部对齐。但是描述仍然在图像下面包裹（阻挡），我希望它也是顶部对齐的，就像标题旁边的标题旁边的标题一样，但又在标题下面。

driver.findElement(by.xpath("android.widget.LinearLayout[1]/android.widget.Frame‌Layout[1]/android.widget.RelativeLayout[1]/android.support.v4.widget.SlidingPaneL‌ayout[1]/android.widget.RelativeLayout[2]/android.widget.RelativeLayout[1]/androi‌d.widget.LinearLayout[1]/android.widget.RelativeLayout[1]/android.widget.Relative‌Layout[1]/android.widget.LinearLayout[1]/android.widget.TextView[1]").click();

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>

Answer 2

听起来你正在追求名为media object的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：

.media { display: block }

.media__img {
    float: left;
    margin-right: 24px
}

.media__body {
    overflow: hidden;
    display: block;
}

Here is a working fiddle to demonstrate

Answer 3

你知道解决问题的方法总是很多。在我看来，由于你遗漏了很多其他标签的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>

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

3 个答案: