试图让div浮动旁边另一个div

我有两个div featureText和skillsText一个接着一个右对齐，我试图让第二个浮动右边的下一个而不是堆叠，我尝试了相对位置在第二个浮子没有用的情况下，容器本身是相对定位的。当我检查第一个div时，它显示为超宽，但我有一个宽度设置，边距和填充已被设置为0，看看是否是这个问题。这是一个小菜鸟问题，但我需要帮助。试图让div浮动旁边另一个div

现场site

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Portfolio of Anders Kitson</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/styles.css"> 
    <script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script> 
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script> 
</head> 
<body> 
<div id="container"> 
    <header> 
     <h1>ASK</h1> 
     <h2>Anders Samuel Kitson, front end web developer.</h2> 
    </header> 
    <div id="featureText"> 
     <h1>Recent Works</h1> 
    </div> 
    <div id="skillsText"> 
     <h1>Super hero skills</h1> 
    </div> 
    <div id="siteThumbs"><!--not sure if this is appropriate use of the section tag--> 
     <div id="springmethod"> 
      <a href="#"><h1 class="springmethod">Springmethod.com</h1></a> 
     </div> 
     <div id="goodmorning"> 
      <a href="#"><h1 class="goodmorning">goodmorningmoon.ca</h1></a> 
     </div> 
    </div> 

</div> 
</body> 
</html>

CSS

/*variables*/ 
/*shared styles*/ 
#container { 
    width: 960px; 
    max-width: 90%; 
    border: solid 0px #000; 
    margin: auto; 
    position: relative; } 

header h1 { 
    background: url("../images/ask.gif"); 
    width: 97px; 
    height: 96px; 
    text-indent: -9000px; } 
header h2 { 
    font-family: "brandon-grotesque",sans-serif; 
    font-weight: 300; 
    font-size: 2.5em; } 

#featureText { 
    margin-top: 70px; 
    margin-bottom: 20px; 
    width: 24%; 
    background: red; } 
    #featureText h1 { 
    font-family: "brandon-grotesque",sans-serif; 
    font-size: 2.5em; 
    font-weight: 700; } 

#skillsText { 
    width: 28%; 
    background: aqua; 
    position: relative; 
    float: left; } 
    #skillsText h1 { 
    font-family: "brandon-grotesque",sans-serif; 
    font-size: 2.5em; 
    font-weight: 700; 
    margin-top: -10px; } 

#siteThumbs { 
    position: relative; 
    float: left; 
    width: 960px; } 
    #siteThumbs .springmethod { 
    background: url("../images/springmethod.jpg") no-repeat; 
    width: 318px; 
    height: 241px; 
    text-indent: -9000px; 
    padding: 0; 
    margin: 0; } 
    #siteThumbs .goodmorning { 
    background: url("../images/goodmorning.jpg") no-repeat; 
    width: 318px; 
    height: 241px; 
    text-indent: -9000px; 
    padding: 0; 
    margin: 0; } 

#siteThumbs a:hover .springmethod { 
    background: url("../images/springmethod.jpg") 0 -241px no-repeat; } 
#siteThumbs a:hover .goodmorning { 
    background: url("../images/goodmorning.jpg") 0 -241px no-repeat; } 

#springmethod { 
    width: 318px; 
    position: relative; 
    float: left; } 

#goodmorning { 
    width: 318px; 
    position: relative; 
    float: left; } 

/*media queries*/ 
/* Smartphones (portrait and landscape) */ 
@media only screen and (min-width: 0px) and (max-width: 767px) { 
    header h2 { 
    font-size: 1.5em; } }

来源

2012-11-24 Cool Guy Yo

取下#featureTextmargin-top: 70px;和浮动左#skillsText

#featureText { 
    margin-bottom: 20px; 
    width: 24%; 
    background: red; 
    float: left; 
} 

#skillsText { float:left; }

来源

2012-11-24 20:49:35

工作！你能解释为什么我的方法不起作用吗？ –

如果您想将浮动div彼此相邻，则不需要相对位置。你的填充也搞乱了布局。 –

试图让div浮动旁边另一个div

回答

相关问题