Question

我有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;
}

Answer 1

我相信你希望获得相同的高度列 - 这是Chris Coiyer的an excellent writeup，详细介绍了你可以使用的不同技术。

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/

Div标签处于同一高度

1 个答案: