orgmode - change sample block width locally

Question

I want to change sample block width locally. for example:

#+OPTIONS: html-postamble:nil
#+HTML_HEAD: <style type="text/css">.example {width:50%; background-color: #eff0e0;}</style>

* half width sample
#+BEGIN_EXAMPLE
half block
#+END_EXAMPLE
* full width sample
#+HTML_HEAD: <style type="text/css">.example {width:100%; background-color: #eff0f1; width:50%;}</style>
#+BEGIN_EXAMPLE
full block
#+END_EXAMPLE

But current code will output all sample block as full width.The second css define will take effect. I am thinking about #+ATTR_HTML but it doesn't work.

#+ATTR_HTML :width 50%

Answer 1

Use width inside :style as below:

#+OPTIONS: html-postamble:nil
#+HTML_HEAD: <style type="text/css">.example {width:50%; background-color: #eff000;}</style>

* half width sample
#+BEGIN_EXAMPLE
half block
#+END_EXAMPLE
* full width sample
#+ATTR_HTML: :style background-color: #eff0f1; width:100%;
#+BEGIN_EXAMPLE
full block
#+END_EXAMPLE

Output: