到目前为止,我已经尝试了所有可能的方法,但是我无法使文本(和第二张图片)看起来像应该的样子。
我想我做错了没什么大不了的,但我只是无法弄清楚是什么。任何帮助将不胜感激!
这是我的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;
}
答案 0 :(得分: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>
答案 1 :(得分:1)
您可以使用以下代码
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf > div {
display: table-cell;
vertical-align: top;
}
.cf {
*zoom: 1;
}
.cf .cf-title {
margin: 0 0 6px;
font-size: 11px;
}
.cf-desc {
margin: 0;
font-size: 12px;
line-height: 1.1;
}
.cf p {
color: #666;
}
.cf .content {
padding-left: 10px;
}
.cf {
background-color: #f5f5f5;
padding: 10px;
width: 200px;
}
<div class="cf">
<div><img src="https://www.ebner.cc/typo3temp/images/WAPPEN4-3d.png" width="52" height="61" alt=""></div>
<div class="content">
<img src="https://www.ebner.cc/fileadmin/redakteur/image/EBNER-Trademark.png" width="63" height="12" alt="EBNER">
<p class="cf-title">Industrieofenbau GmbH</p>
<p class="cf-desc">
Bearer of the <br />
Austrian State Coat of Arm
</p>
</div>
</div>
答案 2 :(得分:0)
您可以尝试以下方法:
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf > div {
display: table-cell;
vertical-align: top;
padding-left: 10px;
}
.cf {
display: inline-block;
background-color: #eee;
padding-right: 10px;
}
<div class="cf">
<div><img src="https://www.ebner.cc/typo3temp/images/WAPPEN4-3d.png" height="96" alt=""></div>
<div>
<img src="https://www.ebner.cc/fileadmin/redakteur/image/EBNER-Trademark.png" width="63" height="12" alt="EBNER">
<p style="margin: 0;">Industrieofenbau GmbH</p>
<p>
Bearer of the <br />
Austrian State Coat of Arm
</p>
</div>
</div>
答案 3 :(得分:0)
看起来这更多是字体太大的问题。一切“被阻止”的方式绝对是正确的。
尝试将以下内容添加到CSS中,然后开始根据自己的喜好调整字体大小和字体。
.cf p {
margin:0 0 5px 0;
font-size:10px;
}
,还将padding-right:10px
(或您想要的任何值)添加到.cf > div
JSFiddle:https://jsfiddle.net/7smkaqj9/