html - 在 image1 旁边和 image2 HTML 下对齐文本
问题描述
我已经尝试了迄今为止发现的所有可能性,但我无法使文本(和第二张图像)看起来像它应该的那样。
我想我做错了没什么大不了的,但我就是不知道是什么。任何帮助将不胜感激!
这是我的html:
<div class="cf">
<div><img src="https://www....></div>
<div>
<img src="https://www...>
<p>Some text1</p>
<p>
ABC <br />
D EF G
</p>
</div>
</div>
这是我的 .css 文件:
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf > div {
display: table-cell;
vertical-align: top;
}
.cf {
*zoom: 1;
}
解决方案
在左侧图像上,使用float:left
和使用padding-right
在图像和文本之间添加间隙。
创建一个新的.clear
div 将清除您的浮动并防止任何其他元素浮动。
.cf {
}
.cf .left-item {
float:left;
padding-right: 10px;
}
p {
margin: 0;
}
.cf .right-item img + p {
padding-bottom: 10px;
}
.clear {
overflow:hidden;
clear:both;
width: 100%;
}
<div class="cf">
<div class="left-item"><img src="https://www.ebner.cc/typo3temp/images/WAPPEN4-3d.png" width="52" height="61" alt=""></div>
<div class="right-item">
<img src="https://www.ebner.cc/fileadmin/redakteur/image/EBNER-Trademark.png" width="63" height="12" alt="EBNER">
<p>Industrieofenbau GmbH</p>
<p>Bearer of the <br />Austrian State Coat of Arm</p>
</div>
<div class="clear"></div>
</div>
推荐阅读
- javascript - 反应 Webpack 实用程序错误
- r - mutate_impl(.data,dots)中的hchart错误:列`x`是不支持的类型引用调用
- ip - CentOS 上的“谁”不显示 WinSCP 客户端
- reporting-services - SSRS - 为计数分隔多个值
- python - 如何访问 skimage RAG 的属性
- netbeans-8 - 实体类的新会话 bean - NetBeans 8.2
- android - resolutionStrategy 会影响依赖库吗
- amazon-web-services - 如何在时间间隔内控制/限制 aws lambda 函数的执行频率?
- excel - 范围左右公式
- c++ - 现代 C++ 中 STL API 的差异(当我在 VS2017 中切换目标时,从 x64 到 x86)