[英]How can i place image under text next to a different image?
Currently, this is what it looks like: https://jsfiddle.net/r8zgokeb/1/ However, I am trying to place another small image underneath the text as well, but i want it to start right underneath the text.目前,这是它的样子: https : //jsfiddle.net/r8zgokeb/1/但是,我还尝试在文本下方放置另一个小图像,但我希望它从文本下方开始。 Therefore, the image underneath the text should not go past the bottom of the left image.因此,文本下方的图像不应超过左侧图像的底部。
HTML: HTML:
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>
Text here
</h2>
</div>
CSS: CSS:
.image-txt-container {
display:flex;
align-items:center;
flex-direction: row;
}
Here is a simple code (not flex, but float of first img):这是一个简单的代码(不是 flex,而是第一个 img 的浮动):
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>Text here</h2>
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
</div>
And CSS:和 CSS:
.image-txt-container {
width: 100%;
}
.image-txt-container img:first-child {
float: left;
padding-right: 40px;
width: 450px;
}
.image-txt-container img:last-child{
max-width: 50px;
}
Hi think this is onw of the way to do嗨,认为这是一种方法
HTML HTML
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>
Text here
</h2>
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
</div>
CSS CSS
.image-txt-container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
grid-auto-flow: row;
}
.image-txt-container img:nth-child(3) {
grid-column-start: 2;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.