由于浏览器大小更改，标题变成两行后，如何使两列之一的文本与另一列的顶部标题图像对齐

Question

我在包装纸 div 中并排放置了两个 div。在左栏中，有一个标题在上面的图像。在右栏中，有多个 link。 links div 有一些顶部填充以将第一个 link 的文本与左列中的图像对齐。但是当屏幕尺寸改变时，左栏内图像上的图像标题分成两行。发生这种情况时，右侧 div 上的文本不再与图像对齐。我迷路了，因为我试图用 css 解决这个问题。有什么想法吗？

我想要的是将右侧 div 的文本与左侧 div 的图像对齐，无论打印图块需要多少行。

.wrapper 
{
width: 90%;
margin: auto;
background: #fff;
display:flex;
}
.col1 
{
width: 48%;
background: #ccc;
float: left;
overflow: hidden;
}
img.col1 {
 width: 100%;
 height: auto;
}
.col2 
{
width: 49%;
margin-left: 1em;
background: #000;
float: right;
color:white;
}
.text 
{
 padding-top: 59px;
}
.yellow {
 color: #ccc;
 font-weight: 600;
 clear:both;
 font-family: arial;
 
}

<div class="main">
<div class="wrapper">
<div class="col1"><h4>Lorem ipsum dolor sit amet consect</h4><a href="/index.php/cine/item/100007-manual-para-criticos-intensos-de-cine-sobre-holy-motors"><img src="https://www.elnuevocojo.com/modules/mod_news_pro_gk4/cache/k2.items.cache.633464537f5b069fc4760ed3327b136c_Lnewspro1.jpg"></a>
</div>
<div class="col2">
<div class="text">
<span class="yellow">This text is aligned with image, but when viewport gets smaller and image title takes two lines, text is not aligned anymore.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>

Answer 1

好吧，如果您不能更改 HTML 结构，一种解决方案是：将内容相同的<h4>添加到与col1中内容相同的col2。我不知道这对你是否可行。让我知道，我可以找到另一个解决方案（希望如此）

此外，不要使用 float 只是利用 flexbox

见下文

.wrapper {
  width: 90%;
  margin: auto;
  background: #fff;
  display: flex;
}

.col1 {
  background: #ccc;
  overflow: hidden;
}

img.col1 {
  width: 100%;
  height: auto;
}

.col {
  flex: 0 0 calc(50% - 0.5em);
}

.col2 {
  background: #000;
  color: white;
  margin-left: 1em;
}
.col2 h4 {
  visibility:hidden;
}
.text {
  
}

.yellow {
  color: #ccc;
  font-weight: 600;
  clear: both;
  font-family: arial;

}

<div class="main">
  <div class="wrapper">
    <div class="col1 col">
      <h4>Lorem ipsum dolor sit amet consect</h4><a href="/index.php/cine/item/100007-manual-para-criticos-intensos-de-cine-sobre-holy-motors"><img src="https://www.elnuevocojo.com/modules/mod_news_pro_gk4/cache/k2.items.cache.633464537f5b069fc4760ed3327b136c_Lnewspro1.jpg"></a>
    </div>
    <div class="col2 col">
      <div class="text">
       <h4>Lorem ipsum dolor sit amet consect</h4>
        <span class="yellow">This text is aligned with image, but when viewport gets smaller and image title takes two lines, text is not aligned anymore.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>

由于浏览器大小更改，标题变成两行后，如何使两列之一的文本与另一列的顶部标题图像对齐

How to keep the text of one of two columns aligned with top titled image of other column after title becomes two lines because of browser size change

css

multiple-columns

vertical-alignment

text-alignment