Css текст справа от картинки: html — Как flexbox версткой расположить текст справа от картинки

css — Как расположить текст слева, а блок справа?

Задать вопрос

Вопрос задан 2 года 6 месяцев назад

Изменён 2 года 5 месяцев назад

Просмотрен 2k раза

Нужна помощь. Кто знает, как сделать так, чтобы текст был слева, а справа был border.

Попробовал обтекание (float) — не получилось.

Border с текстом и изображением.

Изображение выше, набросок того, что у меня должно получиться.

#id1 {
    padding: 10px;
    background-color: #222222;
    border: 1px solid #a2a9b1;
    width: 300px;
    float: right;
    color: white;
}
#id2 {
    font-size: 18px;
    float: left;
    color: white;
}

• css
• вёрстка

0

Быстрый набросок:

body {
  padding: 0 20px;
}
#id1 {
  float: right;
  width: 200px;
  padding: 10px;
  border: 1px solid black; 
}
#id2 {
  font-size: 18px;
}

<div><img src="https://i. picsum.photos/id/800/200/300.jpg?grayscale&hmac=aVCtcPuvEXk_PkEEd6jZZ8DKvePngsyZbSNcwh_f_iA"/><p>текст текст текст текст текст текст текст текст текст текст текст текст текст</p></div>
<div>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Элементы справа изображения — HTML, CSS

Вопрос задан 5 лет 5 месяцев назад

Изменён 5 лет 5 месяцев назад

Просмотрен 364 раза

Всем привет! Сделал следующую конструкцию:

<div>
        <a href="#">
            <img style = "position:left; margin-right:50%;" class = "imgd" src="img/Lady in Red. jpg"/>
            <div>
                <div>
                    <p class = "aria">Text1</p>
                    <p class = "fontd">Text2</p>
                    <button class = "buttonx">Посмотреть продукт</button>        
                </div>
            </div>
        </a>
    </div>

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

• html
• css

Если ты пишешь на бутстрапе, ну так и загони свои элементы в сетку:

<div>
   <!-- левая колонка с картинкой -->
   <div>
      <img class = "imgd" src="img/Lady in Red.jpg"/>
   </div>
   <!-- правая колонка с текстом и кнопкой -->
   <div>
      <div>
            <div>
                <p class = "aria">Lady in Red</p>
                <p class = "fontd">Туалетная вода</p>
                <button class = "buttonx">Посмотреть продукт</button>        
            </div>
        </div>
   </div>
</div>

2

Задайте изображению float:left; — это будет обтекание этой картинки, т. е. если текст будут по высоте больше картинки, то всё, что ниже картинки — будет уже на всю строчку.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — CSS Изображение и текст справа

Ваш код кажется мне довольно странным. Я предполагаю, что вы хотите использовать изображения для ссылок, да? В этом случае я бы предложил изменить ваш HTML на это:

Чтобы добавить текст непосредственно слева от изображений, мы просто пишем его:

 

    
Текст
    
Текст
    
Текст
    
Текст

 

Делая это, вы сможете получить желаемый результат с помощью этого CSS:

 #шоубокс {
    заполнение: 0;
    ширина: 973;
    высота: 46 пикселей;
    z-индекс: 12;
    положение: родственник;
}
#шоубокс .один {
    положение: абсолютное;
    ширина: авто;
    высота: 46 пикселей;
    верх: 0px;
    слева: 0px;
}
#шоубокс . два {
    положение: абсолютное;
    ширина: авто;
    высота: 46 пикселей;
    сверху: 0;
    слева: 240 пикселей;
}
#showbox а, img {
    плыть налево;
}
 

Я для демонстрации создал этот JSFiddle. Надеюсь, это поможет!

РЕДАКТИРОВАТЬ:

Чтобы расположить текст посередине изображения вертикально, нам нужно немного повозиться; вертикальное выравнивание — не самая сильная сторона HTML. Но это возможно.

Во-первых, вам нужно немного отредактировать CSS. Для каждого класса .one , .two , .three , .four нужно добавить

 display:table-cell;
вертикальное выравнивание: посередине;
 

Дисплей : таблица-ячейка; вертикальное выравнивание: посередине; обеспечивает размещение элементов внутри блока, так сказать, посередине по вертикали. К сожалению, этого недостаточно (упомянул ли я, что вертикальное выравнивание — не самая сильная сторона HTML?). Нам также нужно добавить

 #шоубокс п{
    должность: родственница;
    поплавок: справа;
}
 

в УСБ. Мы также добавляем margin-right:5px; в пункт #showbox img,a в CSS:

 #showbox a, img {
    плыть налево;
    поле справа: 5px;
}
 

Это делается для того, чтобы весь HTML и текст справа от изображения или ссылки были перемещены на 5 пикселей от изображения или ссылки.

И, наконец, в HTML мы просто помещаем текст в теги

, вот так:

 <дел>
    <дел>
        
        
Текст