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

Posted 2023-03-05

【中文标题】由于浏览器大小更改，如何在标题变为两行后保持两列之一的文本与另一列的顶部标题图像对齐

【英文标题】：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

【发布时间】：2020-01-06 07:37:12

【问题描述】：

我在一个包装 div 中并排放置了两个 div。在左栏中，有一张上面带有标题的图像。在右栏中，有许多链接。链接 div 有一些顶部填充，以将第一个链接的文本与左列中的图像对齐。但是当屏幕尺寸发生变化时，左栏中图像上方的图像标题会分成两行。发生这种情况时，右侧 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>

【问题讨论】：

这在没有实验性属性的 CSS 中目前是不可能的。没有 CSS 机制来均衡不共享父元素的元素。 - 见***.com/questions/56711501/…

【参考方案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>

【讨论】：

这完美地回答了我的问题，@mihai-t。它使 column2 中的链接与 column1 中的图像对齐。不过，通过解决这个问题，还有两个问题变得明显。首先是我认为改变屏幕尺寸是问题，实际上是标题长度。每当标题占用两行时，链接就会再次错位。另一个问题，这可能是另一个问题，是图像。随着屏幕尺寸的减小，链接列比图像列长。是否可以使用 flex 让图片随着链接的高度增加而随着容器一起增长？

@LizardKG 是的。我想这是可以做到的。如果此问题回答了您的问题，请将其评价为已接受并发布另一个问题。另外，在您发布另一个问题后，在此处写下指向它的链接，以便我尝试回答。