Изменять ширину содержимого тега <p>, но не изменять ширину элементов там

-2

Проблема заключается в редактировании сообщений WordPress. У меня есть тэг p котором есть текст и изображения.

Я хочу, чтобы текст составлял 50% ширины p и изображение, чтобы иметь возможность взять всю ширину p.

Это возможно и как? (По умолчанию каждое изображение помещается в тег p)

<p>
  Here is some text which i want to have the 50% width of the p.
  <img src="">
</p>
  • 0
    Где твой код?
  • 0
    Я не вижу ни одного кода. :(
Показать ещё 11 комментариев
Теги:
css-selectors

3 ответа

1
Лучший ответ

Вы можете сделать это, заполнив свой абзац на 50%, а затем сделав изображение вдвое больше ширины оставшегося пространства:

p {
  padding-right:50%;
}
img {
  display: block;
  width: 200%;
  margin-top:1em;
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in massa magna. Mauris a dui porttitor, tempus eros quis, efficitur est. Nam mollis auctor tempor. Phasellus ultrices porta gravida. Class aptent taciti sociosqu ad litora torquent per
  conubia nostra, per inceptos himenaeos. Sed rutrum vitae leo et venenatis. Ut consectetur sem in turpis tincidunt, sit amet vestibulum arcu volutpat. Aliquam tristique nulla vel scelerisque feugiat. Phasellus sodales diam nec leo pretium, ac placerat
  sem faucibus. Vivamus congue sapien hendrerit urna imperdiet, vel efficitur ipsum mollis.
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Full%20Width&w=500&h=300">
</p>
Поделиться
0

Вы можете использовать display: flex; как это.

div {
  display: flex;
  width: 500px;
  height: 500px;
  background-color: blue;
  justify-content: center;
  align-items: center;
}
h1 {
  flex-grow: 1;
}
/*play with these values*/

img {
  flex-grow: 3;
}
/*play with these values*/
<div>
  <h1>x</h1>
  <img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">
</div>

Где parent - родительский элемент и дочерний элемент child2 - дочерние элементы

Вы должны установить отображение: flex для вашего родительского элемента и flex-grow до равных чисел (если вы хотите, чтобы обе они были на 50% ширины)

Некоторая документация:

Flexbox

Конечно, вы можете использовать другую технику, используя CSS или даже JavaScript, но я думаю, что этот самый простой

Поделиться
0

Если ваш img должен быть внутри p (не идеально), здесь альтернатива flexbox и т. Д.:

p {
  padding-right: 50%;
}
p img {
  width: 200%;
  max-width: 200%;
}

Демо: https://jsfiddle.net/kn1ctyqk/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню