使用花车将物品和侧边栏放在一起

时间：2016-11-29 08:41:09

标签： css3 css-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>

1 个答案:

答案 0 :(得分：0)

* {
  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>

相关问题
最新问题