0

我有 3 个 div，我希望它们显示在相同的高度左右，但现在还没有发生。

概念证明： https : //dl.dropboxusercontent.com/u/51736887/Untitled.png（必须有 10 个代表才能发布图片哦）

问题是侧边栏和主要内容是彼此下方的一个，并且像我想要的那样粘在导航栏下方而不是像我想要的那样。所发生情况的图片：https ://dl.dropboxusercontent.com/u/51736887/Untitled%20-%20Copy.png

这是我当前的代码（仅包括 2 个侧边栏中的 1 个）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="stylesheets/public.css" media="all" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <h3 align="center"><img src="afterlogo.png" alt="" height="358" width="339"></h3>

<div id="nav">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="/public/forums/">Forums</a></li>
    <li><a href="/public/donate.php">Donations</a></li>
    <li><a href="/vote">Vote</a></li>
</ul>
</div>
<div class="content">
<p><b> test </b> 0000-00-00 00:00:00<br><b> test 2 </b> 0000-00-00 00:00:00<br>test3     0000-00-00 00:00:00<br>test4 0000-00-00 00:00:00<br>test <br />test <br />test <br />test     <br />test <br />test <br />test <br />test <br />test <br />test <br />    </p>
</div>
<div class="sidebar"> test </div>

<div class="footer">
&nbsp;
<br />
Test footer
<br />
&nbsp;
</div>
</html>

继承人的CSS：

body {
background-image:url('../bg.png');
background-attachment: fixed;
background-position: bottom;
}

#nav a:link{
text-decoration: none;
color: #000000;
font-size: 2em;
}
#nav a:visited {
color:#000000;
}

#nav a:hover {
color: #00FF00;
}

#nav {
border-radius: 15px;
background-size: cover;
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin:6em;
background-repeat: no-repeat;
word-spacing: 2em;
}

.nav {
text-decoration: none;
}

li {
display: inline;
}

.content {
border-radius: 15px;
background-size: cover;
/*background-image:url('../content.png');*/
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin-left: auto ;
margin-right: auto ;
width: 500px;
background-repeat: no-repeat;
}

.sidebar {
border-radius: 15px;
/*background-size: cover;*/
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: left;
overflow: hidden;
margin-left: 120px;
margin-right: auto;
width: 220px;
float: left;
}

.footer {
clear:both;
border-radius: 500px;
text-align: center;
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin:6em;
background-repeat: no-repeat;
}
4

1 回答 1

0

我相信您正在寻求实现等高的列 - 这是Chris Coiyer 撰写的一篇出色的文章，详细介绍了您可以使用的不同技术。

p/s：如果您可以包含最终布局的实际 HTML 输出（不在单独的 PHP 文件中），那就太好了；）

编辑：查看您的代码后，您似乎绝对定位了侧边栏。你这样做有什么理由吗？您可以轻松地浮动侧边栏和内容，因此它们将并排放置。

更新：首先，您应该避免使用已弃用的 HTML 功能，例如align="center"属性。您应该将所有决定布局的属性委托给您的 CSS 文件。

您不能在同一个元素上同时使用float和。position: absolute它们是相互冲突的属性，两者都会使您的元素脱离正常的文档流。我的建议是将您的内容和侧边栏包装在一个共同的父元素中，例如<main>，<section>或<div>，然后它们浮动。

这是修改后的标记：

<section class="main">
    <div class="content">
        <p>Content</p>
    </div>
    <div class="sidebar">test</div>
</section>

和 CSS：

.main {
    margin: 0 6em;
    /* or you can set width using "width: ..." */
    overflow: hidden; /* Prevent parent from collapsing */
}
.content, .sidebar {
    background-color: rgba(76, 92, 70, 0.7);
    border-radius: 15px;
    float: left;
}
    .content {

    }
    .sidebar {
        width: 250px;
    }

http://jsfiddle.net/2X7pv/

于 2013-11-09T14:28:28.387 回答