如何在不使用float:left的情况下将文本对齐到img的右侧，这样就不会更改默认的父div高度 [英] How to align text to the right side of an img without using float:left so it wont change the default parent div height

问题描述

如何像示例图片中的那样将文本对齐到图像图标的右侧.

How to I align text to the right side of the image icon like the one in the example picture.

我通常会使用" float:left "，但这是针对移动响应设计的，所以我宁愿不使用" float:left "之类的东西，因为它会破坏红色 div 高度的响应式设计.

I would usually use "float:left" but it's for a mobile responsive design so I prefer not using things like "float:left" because it ruins the red divs height with responsive designs.

我必须对齐标题，字幕和一点正方形图像.

I have to align the title, subsitle and a little square image.

推荐答案

易于使用float:向左移动，并且不破坏红色边框div的高度.

您只需要在 .app_top 块中添加 display:table-cell .解决方法如下:

You only have to add display: table-cell to the .app_top block. Here's the solution:

.app_top {
    display: table-cell;
}
.app_top img {
    float: left;
}

请参见工作示例.代码在这里.

这篇关于如何在不使用float:left的情况下将文本对齐到img的右侧，这样就不会更改默认的父div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！