在css定位方面遇到一些麻烦

Question

我正试图做出类似这样的事情。

所以，基本上这里是我的HTML代码：

<div class="container">
        <div id ="header">
                <img class= "header-img" src ="img/header-img.jpg">

            <div class="header-logo">
                <img class = "logo" src="img/logo.png">
            </div>

            <div class = "header-nav">
                <img class = "rectangle" src="img/rectangle.png">

                <ul>
                    <li>Home</li>
                    <li>About Us</li>
                    <li>Contact</li>
                    <li>Protofilo</li>
                </ul>
            </div>
        </div>
    </div>

这就是CSS，我认为浮动应该正常工作但不是。

*{
margin:0px; padding:0px;}

.container{
margin:0 auto;}

#header{
width:100%;}

.header-img{
width:100%;}

.header-logo{
margin:0 auto;width:307px;height:95px;
position:absolute;float:left;top: 0px;}

.header-nav {
 position:absolute;
 top: 0px; float:right;width:846px;
}

浮动不起作用。帮我什么人？

Answer 1

我会采用不同的方式，因为你使用的是一些相互冲突的风格并且缺少相当多的风格。

.container{
    margin:0 auto;
}

您正试图将您的物品放入容器中，但它不会包含这些物品，因为您的浮子上没有“清除”类型，并且高度自动将不会以这种方式运行。

这是一个基本的小提琴，提供了一个非常基本的解决方案来处理你要求的类似布局。

http://jsfiddle.net/t71fm3nm/

Answer 2

你不需要位置：绝对，因为它干扰你的浮动属性。有很多事情需要根据你的需要进行调整，以使事情更易于管理：

1）删除两个位置的实例：绝对，它们不是必需的，也没有帮助。

2）将背景图像从HTML移动到CSS中，找出想要的高度，并在#header选择器中设置高度。这使您可以更轻松地移动放在#header顶部的div。

3）我看到你正在尝试将margin：0 auto应用于.header-logo。您是否试图将徽标图像居中？但与此同时你也将它设置为浮动：左边，这会使边距无效：0自动声明。

4）你已经在CSS中声明了.header-img，但HTML中没有类。

5）您正在使用矩形图像为.header-nav类获取透明矩形，但您可能会发现在.header-nav上声明矩形的大小更容易并设置使用RGBA的不透明度的背景颜色。

以下是经过修改的HTML：

        <div class="container">

        <div id ="header">

            <div class="header-logo">
                <img class = "logo" src="img/logo.png">
            </div>

            <div class = "header-nav">
                <ul>
                    <li>Home</li>
                    <li>About Us</li>
                    <li>Contact</li>
                    <li>Protofilo</li>
                </ul>
            </div>

        </div>

    </div>

这是经过修改的CSS：

    * {
    margin: 0px;
    padding: 0px;
    }
.container {
    margin: 0 auto;
    }
#header {
    background: url(img/header-img.jpg);
    width: 100%;
    height: 200px; /*change to desired height of background image*/
    }
.header-img {
    width: 100%;
    }
.header-logo {
    width: 307px;
    height: 95px;
    float: left;
    top: 0px;
    }
.header-nav {
    top: 0px;
    float: right;
    width: 846px;
    height: 30px; /*change to desired height*/
    background: rgba(33, 33, 33, 0.7);
    }