Question

为什么我的表格div在父div的底部？它希望我多说一些，但问题已被提出，而且非常清楚......为什么表格div出现在我的标题div的底部？我知道我可以破解并给它一个负的上边距，但我知道这不是正确的形式。是什么赋予了？ THX。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
     <div id="header">
        <div id="logo"></div>
        <div id="login">
        <input type="text" placeholder="EMAIL ADDRESS" value="" name="email" id="user">

        </div><!-- end login div -->
     </div><!--end header div -->

</body>
</html>

的CSS：

@charset "utf-8";
/* CSS Document */

body {
    margin: 0px;
    padding: 0px;
}
input {
    float: right;
    margin-left:15px;
}

#header {
    background-image:url(images/headerGradient.png);
    background-repeat: repeat;
    margin:0px;
    padding:0px;
    width:auto;
    height:72px;
    display:block;
}

#logo {
    background-image:url(images/logo.png);
    width: 182px;
    height: 66px;
    vertical-align:middle;
    margin-left: 60px;
}

Answer 1

这是因为您的徽标div没有浮动样式集。尝试添加

float:left

到#logo div

演示：http://jsfiddle.net/eyMJa/1/

Answer 2

在Css中使用float我发现它变得非常烦人，并且让布局变得有点困难，除非你能够在掌握它之前观看一些youtube视频，

尝试使用

     position:absolute;

代替

然后设置

    top:Number of Pixels or percentage/em;
    right:Number of Pixels or percentage/em;
    bottom:Number of Pixels or percentage/em;
    left:Number of Pixels or percentage/em;

也

    position:relative;

似乎在div的dimmensions中添加了空白区域，再次弄乱了布局，其中Absolute的行为类似于float，但没有其他两种方法令人讨厌的交互或页面抖动。如果您因任何原因使用float，请记住在每次使用后添加Clear float，除非您特别需要保留它。

希望这有帮助

为什么我的表格div在底部？

2 个答案: