다른 div 옆에 부동 div를 얻으려고합니다

두 개의 div가 있고 다른 하나는 바로 다음에 스킬을 추가하려고합니다. 두 번째에는 아무 쓸모가없는 플로트가있는 상태에서 컨테이너 자체가 상대적으로 배치됩니다. 첫 번째 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

#featureText에서 margin-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를 얻으려고합니다

답변

관련 문제