Html/css 定位帮助

alt text

如何将黄色与红色并排对齐，同时将“技能”文本保留在灰色下方？

我尝试过:使用 float:left 和红色，但这也会提高技能文本。我尝试过使用相对和绝对，但它们让我感到困惑。

HTML:关键 div id:profiletable(灰色)、profileleft(红色)、profileright(黄色)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Starbuzz Coffee</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
        <div id="allcontent">
            <div id="header">
            </div>

            <div id="main">
                <h1>Jonny</h1>
                <div id="profiletable">
                    <div id="profileleft"><?php echo $gravatar ?></div>
                    <div id="profileright">
                        <strong>Name:</strong> <?php echo $member->getFirstName() . ' ' . $member->getLastName(); ?><br />
                    <strong>Name:</strong> <?php echo $member->getFirstName() ?><br />
                    </div>
                </div>



                <h1>Skills</h1>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                    when an unknown printer took a galley of type and scrambled it to make a type
                    specimen book. It has survived not only five centuries, but also the leap into
                    electronic typesetting, remaining essentially unchanged. It was popularised in
                    the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                    and more recently with desktop publishing software like Aldus PageMaker including
                    versions of Lorem Ipsum.
                </p>
            </div>

            <div id="sidebar">
                <p class="beanheading">
                    sidebar
                </p>

            </div>

            <div id="footer">
                &copy; 2005, Jonny
            </div>
        </div>
    </body>
</html>

CSS:键 ID 位于最底部

body { 
    background-color: #eeeeee;
    font-family:      Georgia, "Times New Roman", Times, serif;
    font-size:        small;
    margin:           0px;
}

#header {
    background-color: #675c47;
    margin:           10px;
    height:           108px;
}

#main {
    background:       #ffffff;
    font-size:        105%;
    padding:          15px;
    margin:           0px 10px 10px 0px;
    width:            510px;
    float:            left;
}

#sidebar {
    background:       #7DCFE7;
    font-size:        105%;
    padding:          15px;
    margin:           0px 0px 10px 540px;
}

#footer {
    background-color: #675c47;
    color:            #efe5d0;
    text-align:       center;
    padding:          15px;
    margin:           10px;
    font-size:        90%;
    clear:            left;
}

h1 {
    font-size:        120%;
    color:            #954b4b;
}

.slogan { color: #954b4b; }

.beanheading {
    text-align:       center;
    line-height:      1.8em;
}

a:link {
    color:            #b76666;
    text-decoration:  none;
    border-bottom:    thin dotted #b76666;
}
a:visited {
    color:            #675c47;
    text-decoration:  none;
    border-bottom:    thin dotted #675c47;
}

#allcontent {
    width:            800px;
    padding-top:      5px;
    padding-bottom:   5px;
    background-color: #675c47;
    margin-left:      auto;
    margin-right:     auto;
}

#profiletable{
    width:           510px;
    background:      #eee;
}

#profileleft {
    background:       red;
    font-size:        105%;
    padding:          0px 10px 10px 0px;
    margin:           0px 10px 10px 0px;
    width:            128px;
}

#profileright {
    background:       yellow;
    font-size:        105%;
    padding:          0px 10px 10px 0px;
    margin:           0px 0px 10px 128px;
    width:            200px;
}

最佳答案

更改 #profileright 的边距至margin:0px 0px 10px 10px; [您修改元素左侧边距的最后一个值]
添加float:left;上#profileleft 以及 #profileright
在你的 CSS 中添加以下内容 .clear {clear:both};
在#profileright之后添加<div class="clear"></div>

实时示例[已修复 - 我将透明 div 放置在错误的位置]:http://jsbin.com/afonu3/2

关于Html/css 定位帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4127855/

Html/css 定位帮助

上一篇：java - 浏览器如何与 Flash Player 或 Java Applet 交互？

下一篇：HTML:在大型网站中使用模板的最佳方式