HTML/CSS定位帮助

如何对齐并排黄边的红色，同时保持灰色下方的“技能”的文字？

我试过的东西：使用浮法：用红色留下，但是这也推高了技能文本。我尝试过使用相对和绝对，但他们对我感到困惑。

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; 
}

来源

2010-11-08 Jonathan

.......... thanks！.......... – Jonathan 2010-11-08 22:14:01

变化幅度上#profileright 到margin:0px 0px 10px 10px; [修改的最后一个值对于元素左侧的边距]
上#profileleft 添加float:left;和#profileright
添加在你的CSS以下 .clear {clear:both};
的#profileright后添加<div class="clear"></div>

活生生的例子[固定的 - 我在错误的位置明确DIV位置]：http://jsbin.com/afonu3/2

来源

2010-11-08 20:58:06 Sotiris

首先，如果你正在固定宽度，你可以随时使用位置和topleft。

但有一个更流畅的布局，把

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

，然后你的技能将在这些下跌（你甚至可以添加一个float: left ）。

在你的CSS设置你的红色和黄色的div您可能需要下profileright和技能较小的关闭件（带clear: both一个<br />应该做的）

来源

2010-11-08 20:44:33 Konerak

有以下几点：

float: left; 
display: inline-block;

创建新款

.clear { 
    clear: both; 
}

放在任何块级元素，我用一个div，带班=黄色块后，你的技能之前，“清除”头球。

来源

2010-11-08 20:46:02 Tom

添加

float:right;

到#profileright

然后清除它与<br clear="all">这里：

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

来源

2010-11-08 20:46:42

HTML/CSS定位帮助

回答

相关问题