0

我有一个页面，我根据它们所属的类别并排显示图像，每个图像数组都以其所属的类别开始。图像的宽度和高度各不相同，但被放入绝对高度为 330 像素的 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。

4

2 回答 2

1

以我的拙见，我不认为你正在做的事情可以通过 CSS 实现——它需要一些简单的 JavaScript 技巧，因为你必须知道右侧第一个图像的相对位置（从容器顶部开始）为了定位文本 - CSS 不是为它设计的。

JS 中的策略是：

  1. 使用要定位的文本循环遍历每个元素
  2. 获取第一个图像的垂直顶部偏移量（相对于包含父项）

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

    $(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 { }:)

于 2013-02-23T12:40:53.283 回答
0

我首先尝试使用 css 解决问题。一段时间后，我想出了以下逻辑：

  1. 创建一个与右侧单元格高度相同的div，显示设置为表格
  2. 在第一个垂直居中的表格单元格中创建一个表格单元格
  3. 在这个 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/

我希望这会为您带来一个清晰、易懂且有用的解决方案。

问候，

杰夫

于 2013-02-23T13:09:05.450 回答