Question

我只用了一年多的时间练习HTML和CSS。我显然有很多需要学习的东西。当我开始重新设计我的网站时，我使用了一个可用的模板。除了边栏，我几乎改变了一切。它左边有侧边栏，我想要它在右边，因为我觉得它看起来更好。我已经将浮动从左向右更改为侧边栏。我已经为内容改变了从右到左的浮动。这只会导致许多我无法解释的问题，而且我不知道如何解决它。我玩弄了很多css。请帮助我理解我做错了什么，以及我不想改变的事情需要改变。我已经玩过这个小提琴了，这就是我的变化（你可以看到，我没有到达任何地方）： The Fiddle

这是我原来的：

HTML

<body>
 <div id="wrapper">
  <div id="header">
  <!-- end div#logo -->
  <div id="menu">
   <ul style="
    overflow: hidden;
     width: 892px;
     /* text-align: center; */
     margin: 0 auto;
">
    <li id="logo"></li>
    <li><a href="/index.html">Home</a></li>
    <li><a href="/games.html">Games</a></li>
  </ul>
 </div>
 <!-- end div#menu --> 
 </div>
 <!-- end div#header -->
 <div id="page">
<div id="page-bgtop">
  <div id="content">
    <!-- InstanceBeginEditable name="Page Content" --><div class="post">
      <h2 class="title"><a href="#">New Site Update!</a></h2>
      <p class="byline">Posted by Nicholas Maguire</p>
      <div class="entry">
        <p>&nbsp; This is the editable area.</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div>

    </div><!-- InstanceEndEditable -->
  </div>
  <!-- end div#content -->
  <div id="sidebar">
    <ul>
      <li id="search">
        <h2>Search</h2>
        <form method="get" action="">
          <fieldset>
            <input type="text" id="seach-text" name="s" value="" />
            <input type="submit" id="search-submit" value="Search" />
          </fieldset>
        </form>
      </li>
      <li>
        <h2>Newest Games</h2>
        <ul>
          <li><a href="games/atv-destroyer.html">ATV Destoyer</a></li>
          <li><a href="games/army-driver.html">Army Driver</a></li>
          <li><a href="games/arkanoid.html">Arkanoid</a></li>
          <li><a href="games/amazing-football.html">Amazing Football</a></li>
          <li><a href="games/alien-vs-predator.html">Alien Vs Predator</a></li>
          <li><a href="games/airport-madness.html">Airport Madness</a></li>
          <li><a href="games/age-of-war.html">Age of War</a></li>
        </ul>
      </li>
      <li>
        <h2>Contact Me</h2>
        <ul>
          <li><a href="feedback.html">Contact Form</a></li>
          <li><a href="feedback.html">Requests</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- end div#sidebar -->
  <div style="clear: both; height: 1px"></div>
</div>
</div>
<!-- end div#page --> 
</div>
<!-- end div#wrapper -->
<div id="footer">
<p id="legal">Copyright &copy; 2014 Crazy Block. All Rights Reserved. </p>
<p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
 </div>
<!-- end div#footer -->
</body>

CSS

{
margin: 0;
padding: 0;
}

body {
background: #E9E9E9;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #757E82;
margin: 0;
}

h1, h2, h3 {
color: #AA2808;
}

h1 {
}

h2 {
}

h3 {
}

p, blockquote, ul, ol {
margin-bottom: 20px;
line-height: 2em;
}

p {
}

blockquote {
}

ul, ol, li {
margin: 0px;
padding: 0px;
list-style: none;
}

a {
text-decoration: underline;
color: #1692ef;
}

a:hover {
text-decoration: none;
color: #165bef;
}

/* Wrapper */

#wrapper {
}

/* Header */

#header{
width: 100%;
height: 91px;
margin: 0;
top: 0;
}

/* Logo */

#logo {
float: left;
width: 270px;
height: 76px;
margin: 0px;
padding: 15px 0px 0px;
margin-left: 27%;
}

#logo h1 {
margin: 0;
padding: 0;
font: normal 36px Georgia, "Times New Roman", Times, serif;
}

#logo h2 {
margin: -2px 0 0 0;
padding: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
font-weight: bold;
color: #444444;
}

#logo h2 a {
color: #9AA9B1;
}

#logo a {
text-decoration: none;
color: #165bef;
}

/* Menu */

#menu {
float: right;
width: 100%;
height: 54px;
margin-top: 0;
background: #ffffff url("/images/menu_bar.jpg") repeat-x left top;
position:fixed;
}

#menu ul {
overflow: hidden;
width: 892px;
margin: 0 auto;
padding: 0 30px;
list-style: none;
line-height: normal;
}

#menu li {
display: inline;
text-align: center;
}

#menu a {
display: block;
float: left;
height: 36px;
padding: 18px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}

li#logo {
height: 52px;
width: 52px;
background: url('/images/cb_logo.png') no-repeat;
margin-top: 1px;
margin-right: 1px;
margin-left: 1px;
}
#menu a:hover, #menu .active a {
background: #1687ef;
color: #FFFFFF;
}

/* Search */

#search {
height: 45px;
padding: 0px 0px 40px 0px;
}

#search form {
margin: 0;
padding: 12px 0px 0 0;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search input {
float: left;
font: 12px Georgia, "Times New Roman", Times, serif;
}

#search-text {
width: 120px;
height: 18px;
padding: 3px 0 0 5px;
border: 1px solid #000000;
color: #000000;
}

#search-submit {
height: 21px;
margin-left: 10px;
padding: 0px 2px;
border: none;
background: #000000;
color: #FFFFFF;
}

/* Page */

#page {
width: 892px;
margin: 0 auto;
}

#page-bgtop {
padding: 0px 30px;
}

/* Content */

#content {
float: right;
width: 564px;
padding-top: 30px;
}
.post {
margin: 0px 0px 30px 0px;
}

.post .title {
margin: 0px;
padding: 0px 0px 5px 0px;
color: #1f201d;
}

.post .title a {
padding: 4px 35px 4px 15px;
background-color: #1535EF;
text-decoration: none;
font-weight: normal;
color: #FFFFFF;
}

.post .entry {
}

.post img {
float: left;
padding: 15px 0px;
}

.post .meta {
text-align: right;
padding-top: 20px;
border-bottom: 1px solid #E5E5E5;
font-weight: bold;
color: #202020;
}

.post .byline {
float: right;
margin-top: -30px;
font-size: 12px;
color: #5E5E5E;
}

/* Sidebar */

#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
position: fixed;
}

#sidebar ul {
margin: 0;
padding: 10px;
list-style: none;
line-height: normal;
}

#sidebar li {
margin-bottom: 1px;
}

#sidebar li ul {
margin: 0px;
padding: 0px 0px 40px 0px;
}

#sidebar li li {
margin: 0;
padding: 9px 0px;
border: none;
background: url(images/img07.jpg) repeat-x left bottom;
}

#sidebar h2 {
margin: 0px;
padding: 0px;
border-bottom: 2px solid #EBEBEB;
font-size: 160%;
font-weight: normal;
color: #454E55;
}

#sidebar h3 {
font-size: 77%;
color: #454E55;
}

#sidebar p {
margin: 0;
line-height: normal;
color: #0038ff;
}

#sidebar a {
border: none;
text-decoration: none;
}

#sidebar a:hover {
text-decoration: underline;
}

/* Submenu */

#submenu {
}

/* News */

#news {
}

#news a {
font-size: 85%;
}

Answer 1

试试这个，

#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
/*position: fixed;*/ //remove it
}

#content {
float: left; // change right to left
width: 564px;
padding-top: 30px;
}

Fiddle

Answer 2

在css Position中使用float属性时，属性将无效。因此，使用right:0;代替浮动，请参阅下面的代码。

 #sidebar {
   /* float: left;*/
    width: 208px;
    padding-top: 30px;
    background-color:#D2D2D2;
    margin-left:initial;
    position: fixed;
    right:0;
    }

    #content {
    float: left;
    width: 564px;
    padding-top: 30px;
    }

并将100% width提供给内部（p，h2，div），以便它们包含在#content div内。

改变侧边栏的位置

2 个答案: