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

标签 html css

我的内容和侧边栏的 div 部分存在一些编码问题。正如您在(链接已删除 > 问题已解决)上看到的那样，我想要主页部分下的版权部分，并希望在右侧启动边栏，如下链接:(链接已删除 > 问题已解决)

你知道我该怎么做吗？

.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上的 float ，并用#mainleft包裹#content和 #sidebar 与 #mainright div。

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

关于html - 带有 div 的 CSS/HTML 中的列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44319220/

上一篇：html - Chrome 上的小型 HTML5 Canvas 上没有子像素定位

下一篇：javascript - 如何使用 D3 更改(和过渡)DIV 高度？

相关文章：

html - html和css的背景问题

css - Web 浏览器支持点单元

html - 尺寸、对齐方式和列表样式等社交图标命令对页脚没有任何影响

html - 如何使文本自动转到 Bootstrap 列中的下一行

HTML - 占剩余页面高度 100% 的 div

html - 如何在 Angular 中使用带有 FormControl 的 Angular Material Slider？

javascript - Div 覆盖在 IFrame 上

Javascript/CSS -- 在点击无关元素时应用 css 样式

html - 如何在半面板中对齐 2 个提交？

javascript - 祖布 : Foundation Framework

©2024 IT工具网  联系我们