Совместите текст рядом с изображением1 и под изображением HTML.

Question

Я перепробовал все возможности, которые нашел до сих пор, но мне не удалось сделать текст (и второе изображение) таким, каким он должен быть.

Я полагаю, что нет ничего страшного в том, что я делаю неправильно, но я просто не могу понять, что. Любая помощь будет очень ценится!

Это мой 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;
}

Answer 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>

Answer 2

Вы можете попробовать это:

.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>

Answer 3

Похоже, это скорее проблема слишком большого шрифта. То, как все «заблокировано», абсолютно нормально.

Попробуйте добавить приведенный ниже код в свой CSS и начать подгонять размер шрифта и семейство по своему вкусу.

.cf p {
  margin:0 0 5px 0;
  font-size:10px;
}

, а также добавьте padding-right:10px (или любое другое желаемое значение) к .cf > div

JSFiddle: https://jsfiddle.net/7smkaqj9/

Answer 4

На левом изображении используйте 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>