Как разместить эти изображения в CSS?

Question

Как разместить эти изображения в CSS?

0

У меня есть некоторые проблемы с позиционированием 2 изображений рядом с некоторыми отзывами в CSS.

Вот как мои отзывы должны выглядеть так:

Вот как это выглядит сейчас:

Как я могу поместить первую строку этого текста рядом с изображениями? Я попытался поместить текст в абзац, в результате первая строка будет ниже изображения автора. Теперь я попытался поместить текст в div, но это закончится, как на втором рисунке.

Это код, который я использовал для своих отзывов:

<div id="recensies_order">
    <div class="reviews item1"><img style="margin-right:10px;" src="quotes.png" alt="quote" /><img src="author.png" alt="authorpic" /> <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></div>
    <div class="reviews item2"><img style="margin-right:10px;" src="quotes.png" alt="quote" /><img src="author.png" alt="authorpic" /> <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></</div>
    <div class="reviews item3"><img style="margin-right:10px;" src="quotes.png" alt="quote" /><img src="author.png" alt="authorpic" /> <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></div>
</div>

#recensies_order {
color: #ACACAB;
font-size: 16px;
font-style: italic;
}

Forza 13 март 2014, в 18:10

Источник

Теги:

html

css

positioning

4 ответа

0

#recensies_order {
color: #ACACAB;
font-size: 16px;
font-style: italic;
width:400px;
}
#recensies_order img{
    float:left;
    clear:right;
    margin:10px;
}
#recensies_order img+img{
    width:64px;
}

.reviews{
    width:100%;
    display:block;
    padding-bottom:10px;
}

JSFIDDLE DEMO

измените значение с, и у вас есть следующее:

#recensies_order {
color: #ACACAB;
font-size: 16px;
font-style: italic;
width:300px;
}
#recensies_order img{
    float:left;
    clear:right;
    margin:10px;
}
#recensies_order img+img{
    width:64px;
}

.reviews{
    width:100%;
    display:block;
    padding-bottom:10px;
}

JSFIDDLE DEMO 2

Gildas.Tambo 13 март 2014, в 15:58

0

Было бы здорово, если бы текст проходил под изображениями, за исключением первой строки. Как в моих примерах
Forza 13 март 2014, в 17:19
0

jsfiddle.net/LGAdX/2
Gildas.Tambo 13 март 2014, в 17:22

0

Должен быть другой код, влияющий на spans. Вы код в порядке. По умолчанию изображения и интервалы являются встроенными, поэтому он должен делать то, что вам нужно. Вы можете делать это с поплавками, но они не нужны.

Здесь ручка с вашим кодом, плавающие изображения и изображения, установленные в inline-block. http://codepen.io/anon/pen/pmJhL

Will 13 март 2014, в 15:16

0

add float: left; для всех ваших изображений

Anubhav 13 март 2014, в 15:01

Ещё вопросы

Было бы здорово, если бы текст проходил под изображениями, за исключением первой строки. Как в моих примерах

Philip Allgaier · Accepted Answer · 2014-03-13T14-50-00.000Z

Термин, который вы ищете, плавающий.

В вашем сценарии должно работать (непроверено) следующее:

<div id="recensies_order">
    <div class="reviews item1">
       <img style="margin-right: 10px;" src="quotes.png" alt="quote" style="float: left" />
       <img src="author.png" alt="authorpic" style="float: left" />
       <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></div>
</div>

Конечно, эти добавления style должны быть перенесены в ваш файл CSS позже.

Демо-версия JsFiddle

Спасибо, это намного лучше! Теперь я хочу лишь немного сдвинуть теги span, чтобы рядом с изображениями была только одна строка? Span не поддерживает поле с отступом
Та же скрипка, без поплавков: jsfiddle.net/3bYk4/3