Question

我有一个页面，我根据它们所属的类别并排显示图像，每个图像数组都以它所属的类别开头。图像的宽度和宽度各不相同。高度，但放入绝对高度为330px的div。

CSS：

.front-index {  
margin: 0 1em 0 2em; 
}

.front-work { 
    margin: 0 2em 2em 0; 
    display: table; 
    width: 66px; 
    position: relative;
    height: 330px;
    background-color:#f0f0f0;
}

.front-work img { 
    margin: .3em 0 .3em 0; 
}

.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.wraptocenter * {
    vertical-align: middle;
}

.front-index,
.front-work {
    float: left;
}

HTML：

<div class="front-index"><p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p></div>


    <div class="front-work">
        <div class="wraptocenter">
            <img width="162" height="250" src="http://images.fanpop.com/images/image_uploads/Yellow-Wallpaper-yellow-646738_800_600.jpg"/>
        </div>  
    </div>  

    <div class="front-work">
        <div class="wraptocenter">
            <img width="250" height="166" src="http://www.takenseriouslyamusing.com/wp-content/uploads/2012/08/Blue.png"/>
        </div>  
    </div>
…

JSFIDDLE：http://jsfiddle.net/rCAKa/9/

我想将文字与右边的第一张图片对齐。

我想到的是，这可能是应该在jquery中完成的。 IE浏览器。以某种方式测量.front-work div内顶部的图像距离，然后将值作为内联代码分配给.front-index div（顶部：无论px）。

也许有人遇到过这种问题并知道解决这类问题的方法？ CSS或JS。

Answer 1

在我的拙见中，我不认为你通过CSS做的事情是可能的 - 它需要一些简单的JavaScript技巧，因为你必须知道第一张图像的相对位置（从容器的顶部）为了定位文本的权利 - CSS并不是为其设计的。

JS中的策略是：

使用您要定位的文字循环遍历每个元素
向右（相对于包含父级）

将顶部填充匹配到图像的顶部位置。或者，您可以设置子元素的顶部位置，填充或边距，或其他重新定位文本的方法。

$(document).ready(function() {
    $(".front-index").each(function() {
        var fromTop = $(this).next().find("img").position().top;
        $(this).css({
            "padding-top":fromTop
        });
    });
});

我已经把你的小提琴分开了，你可以在这里看到它 - http://jsfiddle.net/teddyrised/LT54V/1/

p / s：在一个相关的说明中，.wraptocenter * { }可能不是那里最好的（如同最有效的）选择器，因为如果元素中有许多子元素（可能或者可能有甚至）更多的子元素），CSS将不得不遍历所有这些元素。相反，请尝试使用.wraptocenter > * { }或.wraptocenter img { } :)

Answer 2

我首先尝试使用css解决问题。过了一会儿，我发现了以下逻辑：

创建一个div，其高度与右侧的单元格相同，显示设置为表格
在第一个垂直居中的表格单元格
在此div中创建另一个与图像具有相同高度的细分。

HTML代码是这样的：

<div class="front-index">
    <div class="front-index-inner">
        <div style="height:250px;">
            <p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p>
        </div>
    </div>
</div>

作为我的CSS部分：

.front-index {  
    margin: 0 1em 0 2em; 
    display: table;
    height: 330px;
    overflow: hidden;
}
.front-index-inner {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}

您可以在此处查看结果：http://jsfiddle.net/rCAKa/10/

我希望这能为您提供清晰，易懂和有用的解决方案。

问候，

杰夫

将div与第一个垂直中心div对齐

2 个答案: