0

我有两个 div featureText 和 SkillText 一个接一个，我试图让第二个在下一个右侧浮动而不是堆叠，我尝试了第二个的相对位置，向左浮动无济于事，容器本身是相对定位的。当我检查第一个 div 时，它显示为超宽，但我设置了宽度，边距和填充已设置为 0，以查看这是否是问题所在。这是一个菜鸟问题，但我需要帮助。

现场直播

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

1 回答 1

3

移出margin-top: 70px;并#featureText向左浮动 #skillsText

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

#skillsText { float:left; }
于 2012-11-24T20:49:35.580 回答