Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
108 views
in Technique[技术] by (71.8m points)

html - Image not display beside text box

I'm trying to display this image beside a textbox in a lil code, but I can't get it to work and I don't know whats happening. Can anyone help me?

<div class="card d-inline-block container-flex" style="border: 3px solid #fdf; background-color: #bcd; background-image:url('https://64.media.tumblr.com/fe2ec9554d3f1d642ca92d444116922a/tumblr_oiahvdM0PB1us2dqwo1_400.jpg'); height:400px; background-position: center;">
<div class="card-block w-100">
  <div class="col-md-5 offset-md-0 p-3">
    <div class="wrap"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/16519345_nDCpu2AaPVGtzXY.png" class="fr-fic fr-dib" width="200" height="200"></div></div></div>
    <div class="col-md-5 offset-md-5 p-3" style="color:#000; text-shadow: 2px 2px #fff; height: 350px; overflow: auto; background-color:rgba(255,255,255,.4); border-radius: 25px">
        <p class="font-weight-bold">These are characters I currently have for sale or are pending transfer! Please check profiles themselves for more info. If characters have no info, please refer to here for info on trading/offers/etc.</p>
        <p class="font-weight-bold">What I Take:
          <ul>
            <li>Designs (i like neons and rainbows!)</li>
            <li>Art</li>
            <li>Money (cashapp is on my profile)</li>
            <li>DeviantArt Points (da is on my profile)</li>
            <li>Gift Cards</li>
            <li>D&DBeyond Content Shares</li>
          </ul>
        <p class="font-weight-bold">Characters I want art of the most:
          <ul>
            <li><a href="https://toyhou.se/6113525.charlie">Charlie</a></li>
            <li><a href="https://toyhou.se/9571612.rainbow-rave">Rainbow Rave</a></li>
            <li><a href="https://toyhou.se/4029263.imperial-onyx">Imperial Onyx</a></li>
            <li><a href="https://toyhou.se/9694624.zinnia">Zinnia</a></li>
            <li><a href="https://toyhou.se/8979793.tamia">Tamia</a></li>
            <li><a href="https://toyhou.se/6162624.sir-cross">Sir Cross</a></li>
            <li><a href="https://toyhou.se/2592416.tpos">TPOS</a></li>
            <li><a href="https://toyhou.se/4029101.cherry">Cherry</a></li>
          </ul>
        <p class="text-right font-weight-light">bg (c) jonespatterns.com / code by <a href="https://toyhou.se/capsaicinoid">capsaicinoid</a></p>
    </div>
</div>

you can see the result i keep getting here https://toyhou.se/snoz/characters/folder:1868136

    <!DOCTYPE html>
<div class="card d-inline-block container-flex" style="border: 3px solid #fdf; background-color: #bcd; background-image:url('https://64.media.tumblr.com/fe2ec9554d3f1d642ca92d444116922a/tumblr_oiahvdM0PB1us2dqwo1_400.jpg'); height:400px; background-position: center;">
    <div class="card-block w-100">
      <div class="col-md-5 offset-md-0 p-3">
        <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/16519345_nDCpu2AaPVGtzXY.png" class="fr-fic fr-dib" width="200" height="200"></div></div>
        <div class="col-md-5 offset-md-5 p-3" style="color:#000; text-shadow: 2px 2px #fff; height: 350px; overflow: auto; background-color:rgba(255,255,255,.4); border-radius: 25px">
            <p class="font-weight-bold">text
        </div>
    </div>
</div>
question from:https://stackoverflow.com/questions/65886912/image-not-display-beside-text-box

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Try using <img style="float:left; margin-right:5px" ...>

See also CSS Layout - float and clear.

<div class="card d-inline-block container-flex" style="border: 3px solid #fdf; background-color: #bcd; background-image:url('https://64.media.tumblr.com/fe2ec9554d3f1d642ca92d444116922a/tumblr_oiahvdM0PB1us2dqwo1_400.jpg'); height:400px; background-position: center;">
<div class="card-block w-100">
  <div class="col-md-5 offset-md-0 p-3">
    <div class="wrap"><img style="float:left; margin-right:5px" src="https://f2.toyhou.se/file/f2-toyhou-se/images/16519345_nDCpu2AaPVGtzXY.png" class="fr-fic fr-dib" width="200" height="200"></div></div></div>
    <div class="col-md-5 offset-md-5 p-3" style="color:#000; text-shadow: 2px 2px #fff; height: 350px; overflow: auto; background-color:rgba(255,255,255,.4); border-radius: 25px">
        <p class="font-weight-bold">These are characters I currently have for sale or are pending transfer! Please check profiles themselves for more info. If characters have no info, please refer to here for info on trading/offers/etc.</p>
        <p class="font-weight-bold">What I Take:
          <ul>
            <li>Designs (i like neons and rainbows!)</li>
            <li>Art</li>
            <li>Money (cashapp is on my profile)</li>
            <li>DeviantArt Points (da is on my profile)</li>
            <li>Gift Cards</li>
            <li>D&DBeyond Content Shares</li>
          </ul>
        <p class="font-weight-bold">Characters I want art of the most:
          <ul>
            <li><a href="https://toyhou.se/6113525.charlie">Charlie</a></li>
            <li><a href="https://toyhou.se/9571612.rainbow-rave">Rainbow Rave</a></li>
            <li><a href="https://toyhou.se/4029263.imperial-onyx">Imperial Onyx</a></li>
            <li><a href="https://toyhou.se/9694624.zinnia">Zinnia</a></li>
            <li><a href="https://toyhou.se/8979793.tamia">Tamia</a></li>
            <li><a href="https://toyhou.se/6162624.sir-cross">Sir Cross</a></li>
            <li><a href="https://toyhou.se/2592416.tpos">TPOS</a></li>
            <li><a href="https://toyhou.se/4029101.cherry">Cherry</a></li>
          </ul>
        <p class="text-right font-weight-light">bg (c) jonespatterns.com / code by <a href="https://toyhou.se/capsaicinoid">capsaicinoid</a></p>
    </div>
</div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...