[asp.net]发行与对齐 div

标签: Asp.net HTML CSS
发布时间: 2017/3/26 5:29:32
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我试图创建简单的 CSS layot 在我 ASP.NET web 页。然而,我遇到一些困难,对齐 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;
}

不幸的,输出因为我敢肯定它不是出来。

下面是输出

我可以如何对齐任何建议 divs 正确吗?

解决方法 1:

有一些东西需要加以修正,主要非封闭 <div> ,和一些不匹配的 id 和类之间的 HTML 和 CSS 选择器。

我可以看到你做这种努力,所以我写了基础也许你需要什么基于你的 css 代码,它将帮助你理解和从那里开始。

更新的 JSFIDDLE充分演示

enter image description here

一件事,我想说,我添加了 #user 附近的 #name 和 #logout,使它更容易做的浮动。

清除修复技术,我在哪里使用 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>

留下您的任何问题的意见。

官方微信
官方QQ群
31647020