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

Question

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

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

.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>与 col2 具有相同的内容与col1中的内容相同.我不知道这对你是否可行。让我知道，我可以找到另一个解决方案(希望如此)

另外，不要使用 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>