Home > database >  How do I align an image next to some text with Vue Buefy
How do I align an image next to some text with Vue Buefy

Time:09-09

I want to put an image to the right of my text in Vue with Buefy. Here is my code so far. Could anyone help me?

    <template>
      <section >
    <div >
      <div >
        <div >
          <div >
            <p >
              Let your creativity go wild
            </p>
            <p >
             Kaplash is your go-to tool to help make your coding and blocky dreams come true.
            </p>
            <b-image
           
 
src="https://media.discordapp.net/attachments/999131353033482322/1017389226138009650/unknown.png"
            ratio="16by9"
            @load="onLoad1"
        ></b-image>
          </div>
        </div>
      </div>
    </div>
      </section>
    </template

CodePudding user response:

You just need to add an extra <div> as a wrapper for your image as the code below:

<template>
  <section >
    <div >
      <div >
        <div >
          <div >
            <p >
              Let your creativity go wild
            </p>
            <p >
              Kaplash is your go-to tool to help make your coding and blocky dreams come true.
            </p>
          </div>
          <!-- This is the div that I added -->
          <div >
            <b-image


                src="https://media.discordapp.net/attachments/999131353033482322/1017389226138009650/unknown.png"
                ratio="16by9"
            ></b-image>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

  • Related