Question

alt text

如何将“技能”文字保持在灰色下方，将黄色并排与红色对齐？

我尝试了什么：使用float：left with red但是也会提升技能文本。我尝试过使用相对和绝对但是它们让我感到困惑。

HTML：键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;
}

Answer 1

更改#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

Answer 2

首先，如果您使用固定宽度，则始终可以使用top和left定位。

但要有更流畅的布局，请填写

profileleft为float: left，
profileright为float: left; clear: right

然后你的技能将落在那些（你甚至可以添加float: left）。

您可能需要在profileright和技能下使用一个小的结束元素（<br /> clear: both应该这样做）

Answer 3

在你的CSS中设置你的红色和黄色div有以下内容：

float: left;
display: inline-block;

创建新样式

.clear {
    clear: both;
}

放入任何块元素，我使用div，在黄色块之后和Skills标题之前使用class ='clear'。

Answer 4

添加

float:right;

到#profileright

然后在<br clear="all">处清除它：

<strong>Name:</strong> 
<?php echo $member->getFirstName() ?>
<br />
</div>
<br clear="all" />
</div>

Html / css定位帮助

4 个答案: