divs 出现在另一个 CSS 的下方答案

【问题标题】：divs to appear below one another CSSdivs 出现在另一个 CSS 的下方
【发布时间】：2016-04-18 18:47:59
【问题描述】：

我想让一些内容出现在我的navbar 下方。现在我的内容和我的导航栏被放置在彼此之上。我不确定要添加/更改哪个 CSS 属性来解决此问题。我相信我应该使用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;
}

【问题讨论】：

那是因为你的导航类有 position:absolute。此外，您可能还没有保存您的小提琴，因为它包含默认的反应小提琴。
@Yevgeniy.Chernobrivets 谢谢！更新问题
Div id、name 和 class 是同一标签中的 3 个独立项目。 Id 和 'name' 总是相同的，所以 DOM 会起作用。 “类”用于文本样式和位置。首先更正你的语法。 'display:block; 的位置会变得更加明显。
@Sparky256 id 和 name 在 html 中并不总是相同的。 id 是唯一的，name 不是并且可以与id 分开设置（也可以不设置）。加上name实际上对目前大多数元素无效（spec）。
@abluejelly。对于适用的旧 html 标准。我刚刚了解 angularjs / MEAN 以及它如何修改或绕过 DOM，从而使旧的标记语法过时。 'name' 只适用于古老的 IE 浏览器。我认为有些人仍在使用，这是我的坏事。

标签： html css reactjs react-jsx

【解决方案1】：

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

Fiddle

【讨论】：