0

I have DIVs that are styled as interactive icon widgets, and I want to mix them with text like IMGs. I understand that DIVs aren't allowed in Ps. However, is it possible to make the DIVs look like part of the text? I would use SPAN or I, but a 3rd-party requirement forces me to use DIVs.

The following code

<p>Text before DIV</p>
<div class="my_icon"></div>
<p>Text after DIV</p>

Should ideally look similar to:

<p>Text before DIV<img class="my_icon">Text after DIV</p>
Phil Kang
  • 920
  • 8
  • 18
  • `p, div { display: inline }` – Asons Jul 24 '18 at 14:44
  • `3rd-party requirement forces me to use DIVs` --> force him to understand that it's not suitable – Temani Afif Jul 24 '18 at 14:46
  • 1
    @LGSon making the `p`s `inline` would make them behave very differently from a normal `p`. I don't think the dupe really answers this specific question. – Turnip Jul 24 '18 at 14:50
  • @Turnip As I understood it, they need a `div` inside a `p`, with text before, inside and after the `div`, all on one line, and as they said they generally would use a `span` inside the `p`, they way to accomplish that is simply to make them all display inline. – Asons Jul 24 '18 at 14:54
  • It will certainly accomplish that, but will break the usual behaviour of a `p`. If there was an image before or after, for example, they would behave unlike a normal `p`. http://jsfiddle.net/va3ekqtw/7/ . I can't think of a better solution though. – Turnip Jul 24 '18 at 14:59
  • @Turnip The dupe show how, this fiddle show to limit the specific `p`'s: http://jsfiddle.net/g4y1vwpc/2/ – Asons Jul 24 '18 at 14:59
  • Phil, here is how to make use of `display: inline/-block`: http://jsfiddle.net/g4y1vwpc/2/ – Asons Jul 24 '18 at 15:02
  • @LGSon that doesn't really work though http://jsfiddle.net/g4y1vwpc/4/ – Turnip Jul 24 '18 at 15:03
  • @Turnip Well, there is thousand ways to break a code..., and as we do that already, simply wrap them: http://jsfiddle.net/g4y1vwpc/6/ ... still, the display type `inline/-block` needs to be involved, hence the dupe. – Asons Jul 24 '18 at 15:07
  • @Turnip This might be the best though, using Flexbox: http://jsfiddle.net/g4y1vwpc/7/ – Asons Jul 24 '18 at 15:15
  • Can you use other inline elements, like `i`? If so, that won't mess with your semantics, and you can use it instead of `div`/`span`? – Hans Jul 24 '18 at 19:28
  • @Hans I'm afraid the use of DIV (block-level element) is non-negotiable. If I can't style DIVs like inline images, I guess I could fall back to providing options for aligning them via float...:p – Phil Kang Jul 25 '18 at 03:12
  • @PhilKang: It's not semantically clean, but can you replace `p`s with `div`s? This would allow you to have the nested structure you're looking for, and you can make the nested icon div display `inline`. – Hans Jul 26 '18 at 17:41

0 Answers0