Проблема с размещением изображений

Question

У меня возникла проблема с размещением моих изображений на 2 символа в левой и правой части моего текста. Вот картина того, как это выглядит:

Как вы можете увидеть изображения внизу черного ящика, и я хочу, чтобы каждый из них, чтобы быть рядом с ним, и теперь фон на странице удлиняется из-за того, что изображения сдвинуты вниз.

Вот мой код CSS:

.support-text { 
    width: 600px; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    line-height: -2px; 
    margin-bottom: 130px; 
    clear: left; 

} 

.support-text h1 { 
    font-size: 30px; 
} 

.support-text { 
    font-size: 23px; 
} 

.support-img { 
    margin-top: -80px; 
    margin-bottom: 80px; 
    z-index: 1; 
} 

.ct-pic { 
    float: right; 
    width: 700px; 
    height: 596px; 
    bottom: 30px; 
    background-image: url('../img/ct.png'); 

} 

.ct-pic:hover { 
    -webkit-filter: brightness(180%); 
} 

.t-pic:hover { 
    -webkit-filter: brightness(180%); 
} 

.t-pic { 
    float: left; 
    width: 770px; 
    height: 596px; 
    margin-left: -60px; 
    margin-bottom: -1px; 
    background-image: url('../img/t.png'); 
} 

Вот код HTML:

<div class="main-wrapper"> 
    <section class="support-text"> 
     <img src="img/support-us.png" class="support-img"> 
     <p> hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p> 
    </section> 

    <div class="ct-pic">   
    </div> 
    <div class="t-pic"> 
    </div> 
</div> 

Answer 1

Изображения по умолчанию отображаются инлайн (появляются на одной линии).

Один из способов исправить - удалить <div>, которые по умолчанию отображаются в виде блока (запуск на линии), кроме того, вам может потребоваться установить соответствующую ширину.

<div class="main-wrapper"> 
     <!--ct-pic --> 
     <img src="img/ct.png.png" class="ct-pic"> 

     <!-- blackbox --> 
     <img src="img/support-us.png" class="support-img"> 

     <!--t-pic --> 
     <img src="img/t.png.png" class="t-pic"> 
</div> 

Answer 2

Что-то вроде этого может работать. Возможно, вам придется настроить позиционирование и z-индексирование, чтобы получить необходимый эффект, но это должно привести все элементы в нужное место.

HTML:

<div class="main-wrapper"> 
    <section class="support-text"> 
     <img src="img/support-us.png" class="support-img"> 
     <p> hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p> 
    </section> 
</div> 

CSS:

.support-img::before { 
    content: url('/img/t.png'); 
} 

.support-img::after { 
    content: url('/img/ct.png'); 
} 

Answer 3

Если вы хотите, чтобы убедиться, что 3 плавал элементы будут оставаться рядом друг друга, вы должны установить фиксированную ширину на их элемент контейнера (.main-wrapper), который по крайней мере такой же большой, как и все ширины элементов.

Другим вариантом является замена свойства поплавка на все 3 элемента с помощью display: table-cell. Вероятно, это метод, который я использую, поскольку он прост, надежный и не требует фиксированной ширины ни на чем.

Третий вариант заключается в замене свойство поплавка с display: inline-block;, установите white-space: nowrap; на элемент контейнера, и установить white-space: normal; на .support-text элемента.

Четвертый вариант заключается в замене свойства float на position: absolute;, а затем вручную установить позиции элементов с помощью свойств top и left.

Из всех этих техник я определенно считаю, что второй лучший.