css - 如何解决这个 css float 问题？

Question

这里是 css 新手，正在努力弄清楚如何使 float:left 工作。我要修复的页面在这里:http://www.yshara.com

1) 我想将该页面上的链接:twitter 和网站对齐到个人资料页面的右侧。

2) 如何将标题“Joe Johnson”等与图像容器顶部对齐。

感谢您的帮助。

Answer 1

将 clearfix 应用到父 div 而不是将一个放在中间:

<div id="profile-frame" class="clearfix">
    <div class="left">

        <div class="photo">
            <img width="103" height="103" alt="TestProfile" src="../images/test_profile_1.jpg">
        </div>
        <div class="profile-details">
            <div class="header">
                <h1>Joe Johnson, Basketball &amp; Atlanta</h1>
            </div>

            <div class="desc">
                Hi my name is Joe Johnson, I am 26 years old and live in Atlanta. I enjoy basketball and twitter. I will be achieving much bigger things once I get better teammates.
            </div>
        </div>
    </div>

    <div class="right">
        <div class="links">
            <ul>
                <li><a href="http://www.atlantahawks.com/">website</a></li>
                <li><a href="http://twitter.com/JoeJoe2ATL">twitter</a></li>
            </ul>
        </div>
    </div>
</div>

编辑:抱歉，没有阅读您的第二个问题。拉低你的头衔的是 <h1> 上的边距标签。在您的 CSS 中添加:

 .header h1{
    margin-top:0px;
}