Align text to the right of an image && text doesn't wrap around the image

前端 未结 2 1888
独厮守ぢ
独厮守ぢ 2021-02-14 02:46

Should look like this:

[img] text text
      text text

How is this accomplished?

Seems straight forward, but I\'m struggling.

相关标签:
2条回答
  • 2021-02-14 03:06

    You can use display:inline-block;

    img{
        display:inline-block;
        width:75px;
        height:100px;
        border:1px solid red;
        vertical-align:top;
        margin-right:10px;
    }
    
    div{
        display:inline-block;
        width:200px;
    }
    

    Example: http://jsfiddle.net/jasongennaro/SK9ad/

    To make inline-block; work with IE7, add the following to each rule:

    zoom: 1;
    *display:inline;
    
    0 讨论(0)
  • 2021-02-14 03:14

    Since you know the dimensions of the image:

    HTML:

    <div style="position: relative;">
        <img id="theimg" ... />
        <div id="besidetheimg">
        </div>
    </div>
    

    CSS:

    #theimg{
        position: absolute;
        top: 50%;
        margin-top: -50px; // Half the width of the image
        width: 100px;
        height: 100px;
    }
    
    #besidetheimg{
        margin-left: 100px; // width of image
    }
    

    It's a bit of a weird way to do it. I'm not sure if there is a better way though, and it works: http://jsfiddle.net/dvLqC/

    0 讨论(0)
提交回复
热议问题