开发者

logo on left and menu on right in same row

I want to have in the same raw, in the left a logo, 开发者_运维知识库and in the right a menu like Contact Us. If I make 3 divs for this and I allign the first left, and the 3rd right, it doesn't work. How can you have this?


Float would be a clean, simple way to do it. Try floating your logo div left, and your menu div right, like so:

HTML:

<div id="navbar">
 <div id="logo">Logo</div>
 <div id="navmenu">Nav menu</div>
</div>

CSS:

div#logo {
  float: left;
}

div#navmenu {
  float: right;
}


Without any actual markup to look at, the following is a very simple three-column setup. This is not meant as a three-column page layout, only three columns stretching across the top. Note the use of float to send the DIV's to the same row, left to right*.

* You could set the last right. Also, you will have to clear as well for any content following the #menu-row DIV (this is the overflow: auto part).

CSS

#menu-row {
    overflow: auto;
}
#menu-logo {
    width: 10%;
    float: left;
}
#menu-logo img {
    width: 100%;
}
#menu-content {
    width: 80%;
    background: #ddd;
    float: left;
}
#menu-right {
    width: 10%;
    height: 1.3em;
    background: #dfd;
    float: left;
}
#menu-content li {
    display: inline;
    list-style-type: none;
    height: 128px;
}
#page-content {
    background: #ddf;
}

HTML

<div id="menu-row">
    <div id="menu-logo">
        <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
    </div>
    <div id="menu-content">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Stuff</li>
        </ul>
    </div>
    <div id="menu-right"></div>
</div>
<div id="page-content">
    <p>This is stuff.</p>
</div>

http://jsfiddle.net/LYJUB/1/


I dont fully understand your question, but you might be able to fix it by positioning the divs absolute. in the HTML: <div id="leftdiv"></div> in the CSS:

#leftdiv{
width:10%;
height:100%;
position:absolute;
left:0%;
top:0%;
}
#rightdiv{
width:10%;
height:100%;
position:absolute;
right:0%;
top:0%;
}
#centerdiv{
width:80%;
height:100%;
position:absolute;
left:10%;
top:0%;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜