Как вставить 3 отдельных округлых изображения над 3 отдельными столбцами?

body { 
 
    background: #911f3c 
 
} 
 

 
.content-title { 
 
    font-family: teko; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 40px; 
 
    padding-top: 80px; 
 
    padding-bottom: 50px; 
 
    letter-spacing: 2px; 
 
    text-transform: uppercase; 
 
} 
 

 
.container { 
 
    font-family: teko; 
 
    color: white; 
 
    font-size: 30px; 
 
    line-height: 35px; 
 
    padding-bottom: 50px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
} 
 

 
.column-left { 
 
    float: right; 
 
    padding-left: 30px; 
 
    width: 30%; 
 
} 
 

 
.column-right { 
 
    float: right; 
 
    width: 33%; 
 
} 
 

 
.column-center { 
 
    display: inline-block; 
 
    width: 33%; 
 
}

<h3 class="content-title"> 
 
    Explore - Discover - Enjoy 
 
</h3> 
 

 

 
<div class="container"> 
 
    <div class="column-center">Explore the limitless archive of the worlds highest quality cinematic sports videos </div> 
 
    <div class="column-left">Enjoy the vast selection of videos and learn the stories behind the creation of the art</div> 
 
    <div class="column-right">Discover your favourite film makers, content creators and athletes within the industry</div> 
 
</div>

Я создаю быстрый проект для универа и я борюсь с этим один маленький аспект. Я действительно хочу добавить 3 отдельных относительно небольших округлых изображения под названием 3 слова, но над каждым столбцом (см. Прикрепленное изображение). Но каждый раз, когда я делаю это, весь текст перемещается, и это просто огромная боль.

Как я могу заставить это работать?

источник

2017-02-16 SamButch

им не надеясь заменить текст изображениями. я хотел бы добавить изображение чуть выше каждого фрагмента текста. – SamButch

Поместите теги изображений непосредственно перед вашим текстом и установите для изображений «display: block;». По умолчанию изображения «display: inline;» и будут пытаться рядом с текстом, однако «display: block;» заставит что-либо после перемещения изображения на следующую строку. Похоже, это то, что вам нужно. '' ** или ** сделать это в css: '.container img {display: block; } ' – Santi

Я добавил цвет фона, чтобы можно было увидеть текст при запуске фрагмента. Прежде чем отправлять сообщения, выполните запуск фрагмента, чтобы убедиться в его наличии. У вас нет элементов '' в вашем фрагменте, что затрудняет понимание того, что вы пытаетесь сделать. Попробуйте подключиться к изображениям, скажем, https://dummyimage.com/ или http://lorempixel.com/, с размером, который вы хотите получить. –

Предполагая, что вы не используете какую-либо структуру, как загрузчик, это должно сделать трюк:

body { 
 
    background: #911f3c 
 
} 
 

 
.content-title { 
 
    font-family: teko; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 40px; 
 
    padding-top: 80px; 
 
    padding-bottom: 50px; 
 
    letter-spacing: 2px; 
 
    text-transform: uppercase; 
 
} 
 

 
.col-container { 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
} 
 

 
.col { 
 
    float: left; 
 
    width: 33.3333%; 
 
} 
 

 
.col-content { 
 
    margin-bottom: 30px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    text-align: center; 
 
} 
 

 
.col-content img { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.col-content p { 
 
    font-family: teko; 
 
    color: white; 
 
    font-size: 30px; 
 
    line-height: 35px; 
 
    text-align: justify; 
 
}

<h3 class="content-title"> 
 
    Explore - Discover - Enjoy 
 
</h3> 
 

 
<div class="col-container"> 
 
    <div class="col"> 
 
    <div class="col-content"> 
 
     <img src="https://dummyimage.com/100/"> 
 
     <p> 
 
     Explore the limitless archive of the worlds highest quality cinematic sports videos 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="col-content"> 
 
     <img src="https://dummyimage.com/100/"> 
 
     <p> 
 
     Discover your favourite film makers, content creators and athletes within the industry 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="col-content"> 
 
     <img src="https://dummyimage.com/100/"> 
 
     <p> 
 
     Enjoy the vast selection of videos and learn the stories behind the creation of the art 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Я надеюсь, что это помогает :)

источник

2017-02-17 09:28:22 qwertymind

Почему с Firefox 51.0.1 Я не вижу трех изображений с круговой формой? Вы считали, что добавить правило CSS, например, следующее: border-radius: 50%; '? – sentenza

@sentenza вы правы, но я думаю, что OP просто искал способ правильно позиционировать изображения;) – qwertymind

* Я действительно хочу добавить 3 отдельных, относительно небольших ** закругленных ** изображения * Я понял, что он нуждается в их округлении и ...: / – sentenza

Как вставить 3 отдельных округлых изображения над 3 отдельными столбцами?

ответ

Смежные вопросы