css - 使用 float 将文章和侧边栏放在一起

标签 css css-float

我知道一开始你可能会说这个问题已经回答了几十次； 但我必须说，这些似乎都不适合我。(相信我，我花了好几个小时) 基本上我想做的是使用 float 将几篇文章放在几个侧边栏旁边，所以我将文章向左浮动，将侧边栏向右浮动，但是页面变得困惑，侧边栏位于文章下方，然后 float 到另一边。 我不确定我做错了什么。如果有人可以帮助我找到问题，我将不胜感激。 这是 Jsfiddle:Link 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  font-family: serif;
  width: 80%;
  margin: 0 auto;
  background-color: #e6e6e5;
}

.mainheader {
  height: auto;
  font-family: arial;
  font-weight: 700;
  margin-top: 1em;
}

.navbarul {
  background-color: #666664;
  border-radius: 5px;
  text-align: center;
  min-width: 425px;
  box-shadow: 0px 7px 10px #888;
}

.navbarul li {
  list-style-type: none;
  display: inline-block;
  padding: 10px 0;
  border-radius: 5px;
}

.navbarul li:hover {
  background-color: #DF6438;
}

.navbarul li a {
  text-decoration: none;
  padding: 10px 15px;
  color: white;
}

.contentarticle {
  line-height: 1.5em;
  font-size: 0.9em;
  margin-top: 1em;
  padding: 1em;
  width: 60%;
  background-color: white;
  border-radius: 7px;
  float: left;
}

.sidebars {
  margin-top: 1em;
  margin-left: 70%;
  padding: 1em;
  width: 30%;
  background-color: white;
  border-radius: 7px;
  float: right;
}

.sidebars p {
  padding: 1em;
}

.sidebars h2:hover {
  color: #DF6438;
}

.articleheading {
  font-family: arial;
  font-weight: 550;
  color: black;
  margin-bottom: 0.5em;
}

.articleheading:hover {
  color: #DF6438;
}

.articlefooter {
  color: #A0A09E;
  margin-bottom: 1em;
}

.mainfooter {
  background-color: #666664;
  border-radius: 5px;
  height: 40px;
  margin-top: 1em;
}


/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html>
<head>
	<title>Mock Up</title>
	<link rel="stylesheet" type="text/css" href="assets/css/main.css">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Muck Up of a Website">
</head>
<body>
<header class="mainheader">
	<nav class="navbar">
		<ul class="navbarul">
				<li><a href="#">Home</a></li><!--
			 --><li><a href="#">Portfolio</a></li><!--
			 --><li><a href="#">Blog</a></li><!--
			 --><li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>
	<div>
	<article class="contentarticle">
		<header class="articleheader">
			<h2 class="articleheading">First Article</h2>
		</header>
		<footer class="articlefooter">
			<p>This Was Posted On the 2nd of march 2013 by Christina Vellisa</p>
		</footer>
			<p>
			Lorem ipsum dolor sit amet, eos ea enim omnis reprimique. Ea quod tantas option cum, cu quis odio amet vim, probo voluptatum qui in. Usu soluta insolens sadipscing ne, cu numquam vivendum eloquentiam pro. Enim repudiare ut pri. Sed nominati gubergren ad.

			Veri veniam meliore et duo. Quo assum vocent democritum ne. Erat porro an duo, no sit nihil graeci, te odio paulo voluptua sea. At nisl soleat sit.
			Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source
			</p>
	</article>


	
	<article class="contentarticle">
			<header class="articleheader">
			<h2 class="articleheading">Second Article</h2>
		</header>
		<footer class="articlefooter">
			<p>This Was Posted On the 4th of july 2012 by Hexor</p>
		</footer>
			<p>
			Lorem ipsum dolor sit amet, eos ea enim omnis reprimique. Ea quod tantas option cum, cu quis odio amet vim, probo voluptatum qui in. Usu soluta insolens sadipscing ne, cu numquam vivendum eloquentiam pro. Enim repudiare ut pri. Sed nominati gubergren ad.

			Veri veniam meliore et duo. Quo assum vocent democritum ne. Erat porro an duo, no sit nihil graeci, te odio paulo voluptua sea. At nisl soleat sit.
			Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
			</p>
	</article>

		<aside class="sidebars">
			<h2>Top Sidebar</h2>
			<p>Discover how to use new techniques to achieve an outstanding, cross-browser HTML5.</p>	
		</aside>

		<aside class="sidebars">
			<h2>Second Sidebar</h2>
			<p>Veri veniam meliore et duo. Quo assum vocent democritum ne. Erat porro an duo, no sit nihil graeci.</p>	
		</aside>

		<aside class="sidebars">
			<h2>Third Sidebar</h2>
			<p>Usu soluta insolens sadipscing ne, cu numquam vivendum eloquentiam pro. Enim repudiare ut pri. Sed nominati gubergren ad.</p>	
		</aside>
		<div style="clear:both;"></div>
		</div>
		

		<footer class="mainfooter">
		<p>Copyright &copy 2016 <a href="#">B.Hatami</a></p>

		</footer>


</body>
</html>

最佳答案 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  font-family: serif;
  width: 80%;
  margin: 0 auto;
  background-color: #e6e6e5;
}
.mainheader {
  height: auto;
  font-family: arial;
  font-weight: 700;
  margin-top: 1em;
}
.navbarul {
  background-color: #666664;
  border-radius: 5px;
  text-align: center;
  min-width: 425px;
  box-shadow: 0px 7px 10px #888;
}
.navbarul li {
  list-style-type: none;
  display: inline-block;
  padding: 10px 0;
  border-radius: 5px;
}
.navbarul li:hover {
  background-color: #DF6438;
}
.navbarul li a {
  text-decoration: none;
  padding: 10px 15px;
  color: white;
}
.contentarticle {
  line-height: 1.5em;
  font-size: 0.9em;
  margin-top: 1em;
  padding: 1em;
  width: 60%;
  background-color: white;
  border-radius: 7px;
  float: left;
}
.sidebars {
  margin-top: 1em;
  margin-left: 70%;
  padding: 1em;
  width: 30%;
  background-color: white;
  border-radius: 7px;
}
.sidebars p {
  padding: 1em;
}
.sidebars h2:hover {
  color: #DF6438;
}
.articleheading {
  font-family: arial;
  font-weight: 550;
  color: black;
  margin-bottom: 0.5em;
}
.articleheading:hover {
  color: #DF6438;
}
.articlefooter {
  color: #A0A09E;
  margin-bottom: 1em;
}
.mainfooter {
  background-color: #666664;
  border-radius: 5px;
  height: 40px;
  margin-top: 1em;
}
<html>

<head>
  <title>Mock Up</title>
  <link rel="stylesheet" type="text/css" href="assets/css/main.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Muck Up of a Website">
</head>

<body>
  <header class="mainheader">
    <nav class="navbar">
      <ul class="navbarul">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Portfolio</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </nav>
  </header>
  <div>
    <article class="contentarticle">
      <header class="articleheader">
        <h2 class="articleheading">First Article</h2>
      </header>
      <footer class="articlefooter">
        <p>This Was Posted On the 2nd of march 2013 by Christina Vellisa</p>
      </footer>
      <p>
        Lorem ipsum dolor sit amet, eos ea enim omnis reprimique. Ea quod tantas option cum, cu quis odio amet vim, probo voluptatum qui in. Usu soluta insolens sadipscing ne, cu numquam vivendum eloquentiam pro. Enim repudiare ut pri. Sed nominati gubergren
        ad. Veri veniam meliore et duo. Quo assum vocent democritum ne. Erat porro an duo, no sit nihil graeci, te odio paulo voluptua sea. At nisl soleat sit. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece
        of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going
        through the cites of the word in classical literature, discovered the undoubtable source
      </p>
    </article>
    <article class="contentarticle">
      <header class="articleheader">
        <h2 class="articleheading">Second Article</h2>
      </header>
      <footer class="articlefooter">
        <p>This Was Posted On the 4th of july 2012 by Hexor</p>
      </footer>
      <p>
        Lorem ipsum dolor sit amet, eos ea enim omnis reprimique. Ea quod tantas option cum, cu quis odio amet vim, probo voluptatum qui in. Usu soluta insolens sadipscing ne, cu numquam vivendum eloquentiam pro. Enim repudiare ut pri. Sed nominati gubergren
        ad. Veri veniam meliore et duo. Quo assum vocent democritum ne. Erat porro an duo, no sit nihil graeci, te odio paulo voluptua sea. At nisl soleat sit. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece
        of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going
        through the cites of the word in classical literature, discovered the undoubtable source.
      </p>
    </article>
    <aside class="sidebars">
      <h2>Top Sidebar</h2>
      <p>Discover how to use new techniques to achieve an outstanding, cross-browser HTML5.</p>
    </aside>
    <aside class="sidebars">
      <h2>Second Sidebar</h2>
      <p>Veri veniam meliore et duo. Quo assum vocent democritum ne. Erat porro an duo, no sit nihil graeci.</p>
    </aside>
    <aside class="sidebars">
      <h2>Third Sidebar</h2>
      <p>Usu soluta insolens sadipscing ne, cu numquam vivendum eloquentiam pro. Enim repudiare ut pri. Sed nominati gubergren ad.</p>
    </aside>
    <div style="clear:both;"></div>
  </div>
  <footer class="mainfooter">
    <p>Copyright &copy 2016 <a href="#">B.Hatami</a>
    </p>
  </footer>
</body>

</html>

关于css - 使用 float 将文章和侧边栏放在一起，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40861235/

上一篇：html - 为什么我不能将 "a"标记置于 Bootstrap 列的中心？

下一篇：javascript - jQuery 合并表行，但考虑以前的列

相关文章：

javascript - 编辑自定义 javascript 以隐藏导航菜单、wordpress

css - Twitter Bootstrap 在 CSS 中使用带星号的宽度属性

html - td colspan 宽度不起作用

html - CSS - 1. 标题不缩放 2. float 文本不在同一基线上

css - Chrome 中的 OL 编号未左对齐，出现在右侧

html - 创建导航 - 内联 block 还是 float ？

html - 如何将文本与图像顶部对齐？

html - 从 Bootstrap 3 导航栏反向下拉菜单中删除白线

css - 意外填充阻止响应式网页中的全屏

html - 如何在CSS中使用 "float:right"元素的最小宽度？

©2024 IT工具网  联系我们