solved

solved

关注
发信
关注(28)粉丝(399)

html - 带有div的CSS/HTML中的列

我的内容和侧边栏的div部分有一些编码问题。正如您在（link deleted>problem solved）上看到的，我想要Home部分下面的Copyright部分，并且想要像这样在右侧启动侧栏：（link deleted>problem solved）
你知道我怎么做吗？

.container {
	width:1000px;
	margin:0 auto;
}

.clearfix:after {
	content:"";
	display:table;
	clear:both;
}

#navbar {
	font-family:Ubuntu Condensed;
	font-size:16px;
	background-color:#ffff00;
	background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1));
	height:44px;
	border-radius:4px 4px 0 0;
	margin-top:-44px;
	box-shadow:inset 0px -22px 0px 0px rgba(0,0,0,0.05),inset 0px 2px 0px 0px rgba(255,255,255,0.1),inset 0px -3px 0px 0px rgba(0,0,0,0.1),0px 0px 14px 0px rgba(0,0,0,0.5);
}

#navbar ul {
	margin:0;
	padding:12.5px 0 0 0;
}

#navbar ul li {
	list-style:none;
	display:inline;
	float:left;
}

#navbar ul .navright {
	float:right;
	position:relative;
}

#navbar ul li a {
	padding:13px 20px;
	box-shadow:1px 0px 0px 0px rgba(255,255,255,0.08),inset -1px 0px 0px 0px rgba(0,0,0,0.2);
	color:#000;
	text-shadow:0 1px #ffff00;
	text-decoration:none;
}

#navbar ul .navright a {
	box-shadow:-1px 0px 0px 0px rgba(255,255,255,0.08),inset 1px 0px 0px 0px rgba(0,0,0,0.2);
}

#navbar ul li a:hover {
	background-color:rgba(0,0,0,0.05);
	text-decoration:bold;
}

#navcollapse {
	display:none!important;
}

.open-dropmenu {
	display:block!important;
}

#nav-logo {
	background-image:url(img/logo.png);
	width:203px;
	height:77px;
	display:none;
	float:left;
	margin:-2px 0 0 10px;
}

.space {
	height: 20px;
}

#content {
	width:645px;
	background-color:#fff;
	border-radius:4px 4px 4px 4px;
	box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2);
	padding:15px;
	float:left;
	margin-right:20px;
	margin-bottom:20px;
}

#sidebar {
	width:274px;
	background-color:#fff;
	border-radius:4px 4px 4px 4px;
	box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2);
	padding:15px;
	float:right;
	margin-bottom:20px;
}

#footer {
	vertical-align: middle;
}

.side-heading {
	text-shadow:0 1px #ffff00;
	padding:5px 5px 7px 5px;
	margin:0px 0 5px 0;
	border-radius:3px;
	font-weight:normal;
	font-family:Ubuntu Condensed;
	font-size:16px;
	color:#000;
	background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1));
	background-color:#ffff00;
	box-shadow:inset 0px -15px 0px 0px rgba(0,0,0,0.05),inset 0px 2px 0px 0px rgba(255,255,255,0.1),inset 0px -2px 0px 0px rgba(0,0,0,0.1);
}

.home-badges {
	width:275px;
	margin:0 auto;
}

.holder,.holder_hover {
	border-radius:4px;
	width:50px;
	height:50px;
	background-position:center;
	background-repeat:no-repeat;
	float:left;
	margin:2.5px;
	cursor:pointer;
	-webkit-transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;
	background-color:#ebebeb;
}

.spinner {
	animation-name:rotate;
	animation-duration:10s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	position:absolute;
	width:55px;
	height:55px;
	background:url(img/spinner.png) no-repeat center;
	background-size:cover;
}

<div class="container">
	<div id="navbar">
		<a href="#" id="nav-logo"></a>
		<div id="navcollapse" style="font-size:16px">MENU</div>
		<ul id="mainnav">
		<li><a href="?page=">/</a></li>
		<li><a href="?page=">/</a></li>
		<li><a href="?page=">/</a></li>
		<li><a href="?page=">/</a></li>
		<li><a href="?page=">/</a></li>
		<li class="hide-small-screen"></li>
		<li class="navright"><a href="?page=login">Login</a></li>
		</ul>
	</div>

	<div class="space"></div>

		<div id="content">
			<div class="clearfix"></div>
				-
		</div>

		<div id="content" style="font-size:12px">
			<div class="clearfix"></div>
			© 2017
		</div>

		<div id="sidebar">
			<div class="side-heading">Nieuwste badges</div>
				<div class="box_inside">
				<div class="home-badges">
					<div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC11.gif);"></div>
					<div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC10.gif);"></div>
					<div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC09.gif);"></div>
					<div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC08.gif);"></div>
					<div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC07.gif);"></div>
				</div>
					<div style="clear:both;"></div>
				</div>
		</div>
		<div id="sidebar">
			<div class="side-heading">Nieuwste meubels</div>
				<div class="box_inside">
				<div class="home-badges">
					<a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
					<a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
					<a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
					<a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
					<a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
				</div>
					<div style="clear:both;"></div>
				</div>
		</div>

		<div id="sidebar">
			<div class="side-heading">Twitter</div>
				<div class="box_inside">
				<div class="home-badges">
				<a class="twitter-timeline" href="https://twitter.com/" data-tweet-limit="1" data-chrome="noheader nofooter noborders"></a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
				</div>
					<div style="clear:both;"></div>
				</div>

		</div>
	<div class="clearfix"></div>

</div>

最佳答案

添加此代码：

#mainleft {
  float: left;
}

#mainright {
  float: right;
}

移除#content和#sidebar上的浮子，并用#content将#mainleft和#sidebardiv包装起来。
/*Add this*/

#mainleft {
  float: left;
}

#mainright {
  float: right;
}

.container {
  width: 1000px;
  margin: 0 auto;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

#navbar {
  font-family: Ubuntu Condensed;
  font-size: 16px;
  background-color: #ffff00;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  height: 44px;
  border-radius: 4px 4px 0 0;
  margin-top: -44px;
  box-shadow: inset 0px -22px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -3px 0px 0px rgba(0, 0, 0, 0.1), 0px 0px 14px 0px rgba(0, 0, 0, 0.5);
}

#navbar ul {
  margin: 0;
  padding: 12.5px 0 0 0;
}

#navbar ul li {
  list-style: none;
  display: inline;
  float: left;
}

#navbar ul .navright {
  float: right;
  position: relative;
}

#navbar ul li a {
  padding: 13px 20px;
  box-shadow: 1px 0px 0px 0px rgba(255, 255, 255, 0.08), inset -1px 0px 0px 0px rgba(0, 0, 0, 0.2);
  color: #000;
  text-shadow: 0 1px #ffff00;
  text-decoration: none;
}

#navbar ul .navright a {
  box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.08), inset 1px 0px 0px 0px rgba(0, 0, 0, 0.2);
}

#navbar ul li a:hover {
  background-color: rgba(0, 0, 0, 0.05);
  text-decoration: bold;
}

#navcollapse {
  display: none!important;
}

.open-dropmenu {
  display: block!important;
}

#nav-logo {
  background-image: url(img/logo.png);
  width: 203px;
  height: 77px;
  display: none;
  float: left;
  margin: -2px 0 0 10px;
}

.space {
  height: 20px;
}

#content {
  width: 645px;
  background-color: #fff;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 15px;
  /*float:left; remove this */
  margin-right: 20px;
  margin-bottom: 20px;
}

#sidebar {
  width: 274px;
  background-color: #fff;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 15px;
  /*float:right; remove this */
  margin-bottom: 20px;
}

#footer {
  vertical-align: middle;
}

.side-heading {
  text-shadow: 0 1px #ffff00;
  padding: 5px 5px 7px 5px;
  margin: 0px 0 5px 0;
  border-radius: 3px;
  font-weight: normal;
  font-family: Ubuntu Condensed;
  font-size: 16px;
  color: #000;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  background-color: #ffff00;
  box-shadow: inset 0px -15px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1);
}

.home-badges {
  width: 275px;
  margin: 0 auto;
}

.holder,
.holder_hover {
  border-radius: 4px;
  width: 50px;
  height: 50px;
  background-position: center;
  background-repeat: no-repeat;
  float: left;
  margin: 2.5px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  background-color: #ebebeb;
}

.spinner {
  animation-name: rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  position: absolute;
  width: 55px;
  height: 55px;
  background: url(img/spinner.png) no-repeat center;
  background-size: cover;
}

<div class="container">
  <div id="navbar">
    <a href="#" id="nav-logo"></a>
    <div id="navcollapse" style="font-size:16px">MENU</div>
    <ul id="mainnav">
      <li><a href="?page=home">Home</a></li>
      <li><a href="?page=nieuws">Nieuws</a></li>
      <li><a href="?page=habbo">Habbo</a></li>
      <li><a href="?page=intrahabbo">IntraHabbo</a></li>
      <li><a href="?page=fancenter">Fancenter</a></li>
      <li class="hide-small-screen"></li>
      <li class="navright"><a href="?page=login">Login</a></li>
    </ul>
  </div>

  <div class="space"></div>
  <div id="mainleft">
    <div id="content">
      <div class="clearfix"></div>
      <?php
					if (!empty($_GET['page']))
				{
					if (file_exists('http://www.habbo.iamcolin.nl/pages/'.$_GET['page'].'.php'))
				{
					include('http://www.habbo.iamcolin.nl/pages/'.$_GET['page'].'.php');
				}
				else
				{
					include('http://www.habbo.iamcolin.nl/pages/404.php');
				}
				}
				else
				{
					include('pages/home.php');
				}
				?>
    </div>

    <div id="content" style="font-size:12px">
      <div class="clearfix"></div>
      <b>© 2017 IntraHabbo</b><br> IntraHabbo is niet verbonden aan, aanbevolen, gesponsord of specifiek goedgekeurd door Sulake Corporation Oy of aan zijn gelieerde ondernemingen. IntraHabbo kan gebruik maken van handelsmerken en andere intellectuele
      eigendommen van Habbo, zoals toegestaan volgens het Habbo Fansitebeleid.
    </div>
  </div>
  <div id="mainright">
    <div id="sidebar">
      <div class="side-heading">Nieuwste badges</div>
      <div class="box_inside">
        <div class="home-badges">
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC11.gif);"></div>
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC10.gif);"></div>
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC09.gif);"></div>
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC08.gif);"></div>
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC07.gif);"></div>
        </div>
        <div style="clear:both;"></div>
      </div>
    </div>
    <div id="sidebar">
      <div class="side-heading">Nieuwste meubels</div>
      <div class="box_inside">
        <div class="home-badges">
          <a href="#">
            <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div>
          </a>
          <a href="#">
            <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div>
          </a>
          <a href="#">
            <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div>
          </a>
          <a href="#">
            <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div>
          </a>
          <a href="#">
            <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div>
          </a>
        </div>
        <div style="clear:both;"></div>
      </div>
    </div>

    <div id="sidebar">
      <div class="side-heading">Twitter</div>
      <div class="box_inside">
        <div class="home-badges">
          <a class="twitter-timeline" href="https://twitter.com/intrahabbo" data-tweet-limit="1" data-chrome="noheader nofooter noborders"></a>
          <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
        <div style="clear:both;"></div>
      </div>

    </div>
  </div>
  <div class="clearfix"></div>

</div>

10-08 06:09
Powered by LMLPHP ©2024 solved 0.031548