Question

我希望有相同的原始版本，左边是徽标，右边是联系我们的菜单。如果我为此制作了3个div，并且我将第一个左边和第三个右边对齐，则它不起作用。你怎么能有这个？

Answer 1

浮动将是一种干净，简单的方法。尝试将您的徽标div向左浮动，并将菜单div向右浮动，如下所示：

<强> 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;
}

Answer 2

没有任何实际标记可供查看，以下是一个非常简单的三列设置。这不是三列页面布局，只有三列横跨顶部。请注意使用float将DIV发送到同一行，从左到右*。

*您可以设置最后一项。此外，您还必须清除#menu-row DIV后面的任何内容（这是overflow: auto部分）。

<强> 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/

Answer 3

我不完全理解你的问题，但你可以通过将divs置于绝对位置来解决它。在HTML中：<div id="leftdiv"></div> 在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%;
}

左侧的徽标和同一行右侧的菜单

3 个答案: