Question

我制作了一个显示公司信息的HTML。目前，我有本公司信息的主页。我唯一的问题是浮动侧边栏不会像我想要的那样漂浮。我不知道什么是错的，它不会漂浮在文本旁边，它只是出于某种原因而在它下面。我希望侧边栏看起来像这样：http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float

这是我的html：

<body>



<div id="header">

    <div class = "logo">
     <h1><center><font size = "10">Company Name</font></center></h1>

    <div class="borders">
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    </div>
        </div>
</div>

<br/>

<section>
<div id="content">
        <h2>Company Bio</h2>
        <h3>The information of the company.</h3>
        <p>info info info info info info info info info info info info info info info info 
        info info info info info info info info info info info info info info info info 
        info info info info info info info info info info info info info info info info 
        info info info info info info info info info info info info info info info info 
        </p>
        <p>info info info info info info info info info info info info info info info info 
        info info info info info info info info info info info info info info info info 
        info info info info info info info info info info info info info info info info         
        </p>
</div><!--end content-->
</section>

<nav>
<div id="sidebar">
        <div id="subscribe">
            <h3>Subscribe!</h3>
                <ul id = "subscribe">
                    <li><a href="#">Subscribe via RSS</a></li>
                    <li><a href="#">Get Email Updates</a></li>
                    <li><a href="#">Follow us on Twitter</a></li>
                </ul>
                </div>

                <div id="contributors">
                    <h3>Contributors</h3>
                    <ul>
                        <li><a href="#">Gamble</a></li>
                        <li><a href="#">Judgement</a></li>
                    </ul>
                    <a href="#" >Join Our Team</a>
</div>
</div><!--end sidebar-->
</nav>
<div style="clear:both"></div>



<div id="footer">
        <div class="container">
            <p>Copyright 2015<br />
            All Rights Reserved</p>
        </div><!--end footer container-->
</div><!--end footer-->



</body>

这是我的CSS：

<style>

-------------Navigation
ul#menu {
    list-style: none;
    padding-top: 55px; 
}

ul#menu li a {
    font-size: 30px;
    color: Green;
    text-decoration: none; 
}

ul#menu li {
    float: left;
    padding-left: 100px;
    padding-right: 75px 
}

-------------Sidebar
#content {
    width: 510px; 
    clear: left;
}
#sidebar {
    float: right;
    margin: 0 0 10px 10px;
    background: #d4d6d3;
    border: 1px solid #BEBDBD;
    padding: 15px;
}

-------------Sidebar style
#sidebar h3 {
    font-size: 24px;
    color: #044055;
    font-weight: normal;
    padding-bottom: 20px;
    padding-left: 15px;
}

#sidebar ul {
    list-style: none;
    padding-bottom: 25px;
}

#sidebar ul li a {
    font-size: 14px;
    color: #393838; 
}

ul#subscribe li {
    padding-bottom: 5px; 
}

ul#subscribe li a {
    font-size: 18px; 
}
</style>

<style>
section {
    margin-right: 300px;
    float: left;

}
nav {

    float: right;
    width: 20%;

}
.borders{
border: 3px solid violet;
background-color: violet;
height: 35%;
  margin: 0 auto;
  border-radius: 25px;
    box-shadow:0px 0px 25px #FFE4C4;
}
.logo{
border: 3px solid gray;
background-color: gray;
height: 25%;
}
</style>

Answer 1

在代码中添加以下css：

section {
   margin-right: 300px;
   float: left;
   position: absolute;
}

Answer 2

你好请检查html和css

＆＃13;

ul#menu li a {
    font-size: 30px;
    color: Green;
    text-decoration: none;
}
ul#menu li {
    float: left;
    padding-left: 100px;
    padding-right: 75px
}
-------------Sidebar #content {
    width: 510px;
    clear: left;
}
#sidebar {
    float: right;
    margin: 0 0 10px 10px;
    background: #d4d6d3;
    border: 1px solid #BEBDBD;
    padding: 15px;
}
-------------Sidebar style #sidebar h3 {
    font-size: 24px;
    color: #044055;
    font-weight: normal;
    padding-bottom: 20px;
    padding-left: 15px;
}
#sidebar ul {
    list-style: none;
    padding-bottom: 25px;
}
#sidebar ul li a {
    font-size: 14px;
    color: #393838;
}
ul#subscribe li {
    padding-bottom: 5px;
}
ul#subscribe li a {
    font-size: 18px;
}
section {
    float: left;
    width: 70%;
}
nav {
    float: right;
    width: 20%;
}
.borders {
    border: 3px solid violet;
    background-color: violet;
    height: 35%;
    margin: 0 auto;
    border-radius: 25px;
    box-shadow:0px 0px 25px #FFE4C4;
}
.logo {
    border: 3px solid gray;
    background-color: gray;
    height: 25%;
}
nav.sidebar {
    float:right;
    width:20%;
}

＆＃13;

<div id="header">
    <div class="logo">
         <h1><center><font size = "10">Company Name</font></center></h1>

        <div class="borders">
            <ul id="menu">
                <li><a href="#">Home</a>
                </li>
                <li><a href="#">About</a>
                </li>
                <li><a href="#">Product</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<br/>
<section id="content">
    <div id="">
         <h2>Company Bio</h2>

         <h3>The information of the company.</h3>

        <p>info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info</p>
        <p>info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info</p>
    </div>
    <!--end content-->
</section>
<nav id='sidebar'>
    <div id="">
        <div id="subscribe">
             <h3>Subscribe!</h3>

            <ul id="subscribe">
                <li><a href="#">Subscribe via RSS</a>
                </li>
                <li><a href="#">Get Email Updates</a>
                </li>
                <li><a href="#">Follow us on Twitter</a>
                </li>
            </ul>
        </div>
        <div id="contributors">
             <h3>Contributors</h3>

            <ul>
                <li><a href="#">Gamble</a>
                </li>
                <li><a href="#">Judgement</a>
                </li>
            </ul> <a href="#">Join Our Team</a>

        </div>
    </div>
    <!--end sidebar-->
</nav>
<div style="clear:both"></div>
<div id="footer">
    <div class="container">
        <p>Copyright 2015
            <br />All Rights Reserved</p>
    </div>
    <!--end footer container-->
</div>
<!--end footer-->

＆＃13;

如何修复浮动边栏

2 个答案: