Question

我试图在ASP.NET网页中创建一个简单的CSS layot。但是，我在按照我想要的方式调整Divs时遇到了一些困难。

这就是我想要完成的事情：

enter image description here

请注意，.container文字和.wrap文字的右侧应该一直显示在右侧。右边应该没有间隙。

这是我的html：

<div id="container">
    <div class="header">
        <img src="http://wiki.myexperiment.org/images/MyExperiment_logo_5016x960_trans.png" id="logo" /><div id="name">Welcome, John Smith</div>
        <div id="logout"><a href="logout.aspx"><img src="http://s3.postimg.org/kpgjd1wi7/logout.png"/></a>
        </div>  
    </div>
</div>
<div class="container">
    <div id="left">Left Wrap</div>
    <div id="wrap">
        <div id ="topWrap"> Top Wrap
        </div>
        <div id="leftWrap"> Left Wrap
        </div>
        <div id="rightWrap"> Right Wrap
        </div>
    </div>
</div>

这是我的CSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

html {
    width: 100%;
    height: 100px;
    font-family: 'Open Sans', sans-serif;
    color: white;
}

body {
    background-image:     url('http://s27.postimg.org/48jitw07n/Background_3_Darker.jpg');
background-repeat: no-repeat;
}

 .header {
    left: 0px;
    top: 0px;
    position: fixed;
    height: 76px;
    background-color: black;
    margin-bottom: 25px;
    width: 100%;
    opacity: 0.5;
  }

#logo {
float: left;
margin-left: 5px;
padding-top: 9px;
width: 300px; 
height: 50px;
}

#name {
float: right;
margin-right: 100px;
display: inline-block;

}

#logout {
float: right;
padding-top: 19px;
display: inline;
margin-right: 35px;
}

.container {
margin-top: 50px;
width: 100%;
height: 100%;
}

.left {
position: relative;
float: left;
margin-top: 50px;
width: 10%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}

#wrap {
margin-left: 12%;
width: 100%;
height: 400px;
position: relative;
}

#topWrap {
width: 100%;
height: 50%;
}

#leftWrap {
width: 50%;
height: 50%;
margin-left: 5px;
display: inline-block;
}
#rightWrap {
float: right;
margin-right: 5px;
display: inline-block;
}

不幸的是，输出并没有像我期待的那样出现。

这里是output

有关如何正确对齐divs的任何建议吗？

Answer 1

现在您的div已经关闭，以下是我立即看到的问题：

您在CSS中引用了.left，但HTML中的任何内容都没有class="left"。您有id="left"，这意味着您的CSS应更新为#left。
您不能在同一元素上使用inline-block和float。它们是两种完全不同的显示类型，因为“float”隐式设置display: block。试试这个：

http://jsfiddle.net/ryanwheale/e60c3zt0/4/

    #leftWrap {
       float: left;
       width: 50%;
       height: 50%;
    }
    #rightWrap {
       float: right;
       width: 50%;
    }

Answer 2

有些东西需要修复，主要是未关闭的<div>，以及HTML和CSS之间的一些不匹配的id和类选择器。

我可以看到你已经做出了这样的努力，所以我根据你的CSS为你需要的东西写了基础，也许它会帮助你理解并从那里开始。

UPDATED JSFIDDLE和FULL DEMO

enter image description here

我想说的一件事是，我在#name和#logout周围添加了一个#user，这样可以更容易地进行浮动。

clear fix technique，我在代码中使用class="cf"。

<div id="header" class="cf">
    <img id="logo" src="path/to/logo.png" />
    <div id="user">
        <div id="name">
            Welcome, John Smith
        </div>
        <div id="logout">
            <a href="#"><img src="path/to/logout.png" /></a>
        </div>
     </div>
</div>

留下您对任何问题的评论。

对齐div的问题

2 个答案: