时间戳

首页 > 解决方案 > 将右侧的图像 div 与 3 个垂直文本 div 对齐

html - 将右侧的图像 div 与 3 个垂直文本 div 对齐

问题描述

我正在尝试将包含我的显示图片的图像 div 与左侧的三个单独的 div 右对齐。像这样的东西：div-idea

.title-container {
	text-align: right;
	display: inline-block;
}

.para-container {
	text-align: left;
	display: inline-block;
}

.icon-container {
    margin: auto;
}

.logo {

	display: inline-block;

}
<header>
<div class="logo-container" style="float:left;">
<h1>Title Container</h1>
</div>
</header>
<h4>
<div class="para-container" style="float:left; white-space:nowrap;">
<p>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis nisl magna. Nunc <br> pharetra varius dui eu fermentum. Quisque ut neque velit. Pellentesque massa sapien, <br> consectetur non dui eu, consequat commodo ante. Phasellus ac lectus nec justo fermentum <br>congue non sed ex. Aenean in tortor ac eros maximus rhoncus a in nulla. Fusce ultricies ipsum <br>vel lacus pulvinar, auctor ultrices leo porta. Donec eu metus sit amet erat hendrerit vehicula <br>in eget lacus. 
</h3></p></div>
	
<div class="logo" style="float:right;">
<img itemprop="image" src="https://dinesh-ghimire.com.np/wp-content/uploads/2019/02/html5.png" height="200" width="200" alt="image"/></a></div>
		
<div style="clear: left;"/>
</h4>

<div class="link-container">
<a href="">Contact Me </a>
</div>

任何帮助，将不胜感激！谢谢。

标签： htmlcss

解决方案

您可能会想为此使用 css 网格。将此CSS添加到父容器

display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 60% 40%;

然后（参考您为类名发布的图像）将这些添加到子容器中

.title {
grid-row: 1;
grid-column: 1;
}

.paragraph {
grid-row: 2;
grid-column: 1;
}

.linkDiv {
grid-row: 3;
grid-column: 1;
}

.imageDiv {
grid-row-start: 1;
grid-row-end: 4;
grid-column: 2;
}

这应该可以像您提供的图像一样显示。

推荐阅读