How to place gif in the backspace without any change of the sequence of radio-CodePudding

The code show the gif is place like the snippet code run out but I want place the gif on the black space without change any sequences of the radio in the container. Is this able to done it? Here is the

.gif {
        display: block;
        margin-left: 150px;
        margin-right: auto;
        width: 240px;
    }
    .section {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .container {
        max-width: 400px;
        width: 90%;
        padding: 20px;
        box-shadow: 0px 0px 20px #00000020;
        border-radius: 8px;

    }

<div >
<div >
<h3>Choose</h3>
<img src="https://www.creatopy.com/blog/wp-content/uploads/2018/07/classic-dancing-banana-gif.gif" alt="water" >
<p>
<input type="radio"  name="searchterm" value="berry">Berry<br/>
<input type="radio"  name="searchterm" value="lemon">Lemon<br/>
<input type="radio"  name="searchterm" value="avocado">Avocado<br/>
<input type="radio"  name="searchterm" value="apple">Apple<br/>
<input type="radio"  name="searchterm" value="banana">Banana<br/>
</p>
</div>
</div>

CodePudding user response：

Like most things in web development there are a few ways to do this, here are 3 examples using float, backgrounds & flexbox.

.gif {
        display: block;
        width: 240px;
    }
    .section {
        width: 100%;
        display: flex;
        flex-flow: wrap;
        align-items: center;
        justify-content: center;

    }

 .container {
        max-width: 400px;
        width: 90%;
        padding: 20px;
        box-shadow: 0px 0px 20px #00000020;
        border-radius: 8px;
        margin: 0 auto;
   }
h4 {
width: 100%;
}
.float img {
  float: right;
  width: 40%;
 }
.bg {
background-size: 40%;
background-position: right center;
background-repeat: no-repeat;
}

.flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex img {
width: 40%;
}

<div >
<h4>Float</h4>
<div >

<img src="https://www.creatopy.com/blog/wp-content/uploads/2018/07/classic-dancing-banana-gif.gif" alt="water" >

<h3>Choose</h3>

<p>
<input type="radio"  name="searchterm" value="berry">Berry<br/>
<input type="radio"  name="searchterm" value="lemon">Lemon<br/>
<input type="radio"  name="searchterm" value="avocado">Avocado<br/>
<input type="radio"  name="searchterm" value="apple">Apple<br/>
<input type="radio"  name="searchterm" value="banana">Banana<br/>
</p>
</div>

<h4>Background</h4>
<div  style="background-image: url(https://www.creatopy.com/blog/wp-content/uploads/2018/07/classic-dancing-banana-gif.gif)">

<h3>Choose</h3>

<p>
<input type="radio"  name="searchterm" value="berry">Berry<br/>
<input type="radio"  name="searchterm" value="lemon">Lemon<br/>
<input type="radio"  name="searchterm" value="avocado">Avocado<br/>
<input type="radio"  name="searchterm" value="apple">Apple<br/>
<input type="radio"  name="searchterm" value="banana">Banana<br/>
</p>
</div>


<h4>Flexbox</h4>
<div >

<div>
<h3>Choose</h3>
<p>
<input type="radio"  name="searchterm" value="berry">Berry<br/>
<input type="radio"  name="searchterm" value="lemon">Lemon<br/>
<input type="radio"  name="searchterm" value="avocado">Avocado<br/>
<input type="radio"  name="searchterm" value="apple">Apple<br/>
<input type="radio"  name="searchterm" value="banana">Banana<br/>
</p>
</div>
<img src="https://www.creatopy.com/blog/wp-content/uploads/2018/07/classic-dancing-banana-gif.gif" alt="water" >
</div>

</div>

CodePudding user response：

Just use display:flex

    .gif {
        display: block;
        margin-left: 150px;
        margin-right: auto;
        width: 240px;
    }
    .section {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .container {
        max-width: 400px;
        width: 90%;
        padding: 20px;
        box-shadow: 0px 0px 20px #00000020;
        border-radius: 8px;

    }
    .flex {
        display:flex;
    }
    .flex > div {
        flex:none;
    }

<div >
   <div >
      <div>
         <h3>Choose</h3>
         <p>
            <input type="radio"  name="searchterm" value="berry">Berry<br/>
            <input type="radio"  name="searchterm" value="lemon">Lemon<br/>
            <input type="radio"  name="searchterm" value="avocado">Avocado<br/>
            <input type="radio"  name="searchterm" value="apple">Apple<br/>
            <input type="radio"  name="searchterm" value="banana">Banana<br/>
         </p>
      </div>
      <img src="https://www.creatopy.com/blog/wp-content/uploads/2018/07/classic-dancing-banana-gif.gif" alt="water" >
   </div>
</div>

CodePudding user response：

To me the gif looks as though it is a decorative image rather than one giving a lot of meaning (e.g. to a screen reader user) so I'd consider putting it in as a background image rather than an actual image.

That way also when you come to make your code more responsive it will automatically adjust.

Here's a simple example, of course you will want to alter the size and positioning to suit exactly what you want:

.section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  max-width: 400px;
  width: 90%;
  padding: 20px;
  box-shadow: 0px 0px 20px #00000020;
  border-radius: 8px;
  background-image: url(https://www.creatopy.com/blog/wp-content/uploads/2018/07/classic-dancing-banana-gif.gif);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: auto 70%;
}

<div >
  <div >
    <h3>Choose</h3>
    <p>
      <input type="radio"  name="searchterm" value="berry">Berry<br/>
      <input type="radio"  name="searchterm" value="lemon">Lemon<br/>
      <input type="radio"  name="searchterm" value="avocado">Avocado<br/>
      <input type="radio"  name="searchterm" value="apple">Apple<br/>
      <input type="radio"  name="searchterm" value="banana">Banana<br/>
    </p>
  </div>
</div>