Question

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

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

Answer 1

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

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

#skillsText { float:left; }

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

1 个答案: