div 显示在另一个下方 CSS

Question

我想在我的 navbar 下方显示一些内容。现在我的内容和我的导航栏放在彼此之上。我不确定 CSS 属性到 add/change 哪个可以解决这个问题。我相信我应该使用 display: block;。但是我不确定把它放在哪里

这是一个 jsfiddle 示例：

https://jsfiddle.net/liondancer/69z2wepo/39146/

这是 JSX：

var Logo = React.createClass({
render: function() {
    return (
    <a href="/"> Here </a>
  );
}
})

var NavBar = React.createClass({
  render: function() {
    return (
      <div className="navigation">
                <div className="container">
                    <Logo/>
                    <div className="site-navigation">
                        <ul>
                            <li>
                                <a href="/gallery">Gallery</a>
                            </li>
                            <li>
                                <a href="/news">News</a>
                            </li>
                            <li>
                                <a href="/contact">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
    );
  }
});

var Content = React.createClass({
  render: function() {
    return (
        <div className="content-container">
                This is home.
            </div>
    );
  }
})

var Layout = React.createClass({
    render: function() {
    return (
       <div>
         <NavBar/>
         <Content/>
       </div>
    );
  }
})

ReactDOM.render(
  <Layout/>,
  document.getElementById('container')
);

这里是 CSS:

.navigation {
    position: absolute;
    width: 100%;
}

.container {
  position: relative;
  width: auto;
  padding: 0 50px;
  margin: 10px auto 0px auto;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  margin: 0;
  height: 45px;
}

.site-navigation {
  float: right;

 }

.site-navigation ul li{
   display: inline;
 }

.site-navigation ul li a {
   text-decoration: none;
   padding: 25px;
 }

.site-navigation ul li a:hover {
   padding-bottom: 10px;
   color: #FFFFFF;
   transition: all 0.25s ease-in-out 0s;
}

Answer 1

删除 .navigation 上的 position: absolute;，您将获得所需的输出。

Fiddle

div 显示在另一个下方 CSS

divs to appear below one another CSS

html

css

reactjs

react-jsx