When I use the bootstrap to content layout, if the picture is on the left, it seems to be adaptive. If I put the picture on the right, it is different from the original. How can I control it? `

<div  id="about">
    <div >
    <h1 >About Me</h1>
      <div >
        <div >
            <img src="img/120.png" >
                                            </div>
                <div >

                    <h3>D.John</h3>
    <p>
        ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
            </p>
        </div>
    </div>
  </div>
</div>
    
<div  id="about">
    <div >
        <h1 >About Me</h1>
            <div >
                <div >
                        <h3>D.John</h3>
            <p>
        ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
            </p>
        </div>
    </div>
  </div>
</div>
    

`effect images here is effect images

css: .about{ margin: 4em 0; padding: 1em; position: relative; } .about h1{ color:#F97300; margin: 2em; } .about img{ height: 100%; width: 100%; border-radius: 50% } .about span{ display: block; color: #888; position: absolute; left: 115px; } .about .desc{ padding: 2em; border-left:4px solid #10828C; } .about .desc h3{ color: #10828C; } .about .desc p{ line-height:2; color:#888; }

If I put the picture on the right, it is different from the original. How can I control it?

CodePudding user response：

<div  id="about">
    <div >
        <h1 >About Me</h1>
        <div >
            <div >
                <img src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_brown.png"
                    >
            </div>
            <div >

                <h3>D.John</h3>
                <p>
                    ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                    veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit
                    esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est
                    laborum.
                </p>
            </div>
        </div>
    </div>
</div>

<div  id="about">
    <div >
        <h1 >About Me</h1>
        <div >
            <div >
                <img src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_brown.png"
                    >
            </div>
            <div >
                <h3>D.John</h3>
                <p>
                    ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                    veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit
                    esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est
                    laborum.
                </p>
            </div>
        </div>
    </div>
</div>

Try this code You can mange the layout through order option.

CodePudding user response：

interchange code format about：<div >to<div > its ok