1

I'm trying to align two divs side by side - one div contains an image, and the other contains text about the person in the image (i.e. a profile), I can't figure out how to get the divs to line up together though, I've tried floating and using table-cell displays and it never seems to stick. Perhaps someone else could fix the problem for me?

HTML

<div id="tai-prof">
    <div class="prof-content">
        <div class="picture">
            <img src="http://i.imgur.com/BXgeNF3.png">
        </div>
        <div class="profile">
            <div class="prof-desc">
                 <h2>Name</h2>

                 <h2 class="desc">Description</h2>

                 <h2 class="email">email (maybe)</h2>

                <span class="prof-bio">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally</span>
                <span class="sites"> <a href="#">www.mysite.com</a> | <a href="#">www.mypage.com</a> | <a href="#">my blog</a>

                </span>
            </div>
        </div>
    </div>
</div>

CSS

.prof-content, .profile {
    float: left;
}
.prof-content .picture {
    float: left;
}
.prof-content .picture img {
    width: 45%;
}
.prof-content .prof-desc {
    display: table-cell;
    /*position: relative;
    left: -25%;*/
}
4

3 回答 3

1

Check your CSS

    .prof-content, .profile {
    float: left;
}
.prof-content, .picture {
    float: left;
}
.prof-content, .picture, img {
    width: 45%;
}
.prof-content .prof-desc {
    display: table-cell;
    /*position: relative;
    left: -25%;*/
}

You were missing commas

于 2013-11-03T06:54:27.850 回答
1

This should be your css:

.prof-content .profile, .prof-content .picture {
float: left;
width:50%;
}
.prof-content .picture img {
    width: 90%;
}

See fiddle here: http://jsfiddle.net/rqPVD/1/

于 2013-11-03T11:03:36.837 回答
1

If your problem when using display: table-cell was that the first line of the text had a space above it then most likely you forgot that table cells by default are vertically aligned on their baseline. And since you have an image in the first cell then the bottom of that image lines up with the bottom of the text's first line's bottom.

So remember to use vertical-align: top to the cells that you need to be aligned to the top edge (or whatever it is you need).

Using your same HTML:

    <div id="tai-prof">
        <div class="prof-content">
            <div class="picture">
                <img src="http://i.imgur.com/BXgeNF3.png">
            </div>
            <div class="profile">
                <div class="prof-desc">
                     <h2>Name</h2>

                     <h2 class="desc">Description</h2>

                     <h2 class="email">email (maybe)</h2>

                    <span class="prof-bio">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally</span>
                    <span class="sites"> <a href="#">www.mysite.com</a> | <a href="#">www.mypage.com</a> | <a href="#">my blog</a>

                    </span>
                </div>
            </div>
        </div>
    </div>

Change the CSS to:

    #tai-prof {display: table}

    .prof-content {display: table-row}

    .prof-content, .profile ,
    .prof-content .picture {
        display: table-cell;
        vertical-align: top;
    }

    .prof-content .picture {width: 30%}
    .prof-content .picture img {
        width: 100%;
    }
于 2013-11-03T12:17:32.300 回答