Question

我遇到一个特殊div的问题，它不会浮动到右边。我试图删除div和其他方法，但它仍然无效。

以下是我正在使用的以下css和html代码：

CSS：

            #sidebarright{
                float: right;
                width: 30%;
                padding: 0; margin:0;
                padding-top: 20px;
            }

    .resstyle{
     font-size: 18px !important;
    font-weight:bold;
                margin: 0 0 7px 0;
                padding-left: 20px;
            }
    #wrapper {
    width: 940px;
    height:100%;
    margin: 0 auto;
    }
    #banner-wrapper{
        display:block;
        padding:0;
        margin-left:auto;
        margin-right:auto;
        background:#FFF;
        background-image: url(./img/Banner.jpg);
        height:14.6%;
        padding-bottom:44px;
    }


HTML:

    <div id="wrapper">

        <!-- banner-wrap starts here -->
        <div id="banner-wrapper">                                       
                    <!-- Menu Tabs -->

                <ul>
                    <li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:white !important">|</span>&nbsp;<a href="Support.cfm"><span>Support</span></a></li>

                </ul>
        </div>

        <div id="sidebarright">
            <a href="#"><img class="button" src="img/Pro.jpg" alt="Pro" /></a>
            <div class="resstyle">Resources</div>       
        </div>
    </div>

UPDATE:

<!---Temporary styling, to test--->
<style>
.img-banner{
    margin-left:auto;
    margin-right:auto;
    display:inline;
}

body{
    position:relative;
    background-color:white;
    margin: 0;
    padding: 0;
}

ul{
    list-style:none;
}

a{  
    color: white;
    text-decoration: none;
    font-family: Sherwood !important;
}

.navbar-buttons{
    padding-top:20px;
    padding-right:20px;
    text-align:right;
    list-style:none;
    margin:0 auto;
    overflow:hidden;
    <!---background-image: url(./img/Banner.jpg);--->
}

#wrapper {
    width: 940px;
    height:100%;
    margin: 0 auto;
 }

#banner-wrapper{
    display:block;
    padding:0;
    margin-left:auto;
    margin-right:auto;
    background:#FFF;
    background-image: url(./img/Banner.jpg);
    height:14.6%;
    padding-bottom:44px;
}

img.no-border{border: 0;}

.img-banner{
    margin-left:auto;
    margin-right:auto;
    display:block;
}

<!---/**********************Left Side of Page****************************/--->
#sidebarleft{
    width: 30%;
    padding-top:30px;
    padding-right: 20px;
    display:inline;
    float:left;
}

#sidebarleft ul.menu{
    list-style:none;
    padding:0;
    margin:10px 0 10px 0;
}

.leftbuttons1{
    background-image: url(./img/Button_1.jpg);
    background-repeat:no-repeat;
    padding:  5px 10px 10px;
}

.leftbuttons1 a{
    color:grey; 
    font-size:10pt !important
}

.leftbuttons{
    background-image: url(./img/Button_1.jpg);
    background-repeat:no-repeat;
    padding: 5px 0 10px 10px;
}

.leftbuttons a{
    color:grey; 
    font-size:10pt !important
}

.leftbuttons2{
    background-image: url(./img/Button_2.jpg);
    background-repeat:no-repeat;
    padding: 7px 0 10px 7px;
}

.leftbuttons2 a{
    color:grey;
    vertical-align:center;
    font-size: 10pt !important;
}
    <!---/**************************************************/--->

<!---/***********************Right Side of Page***************************/--->
#sidebarright{
    float: right;
    width: 30%;
    padding: 0; margin:0;
    padding-top: 20px;
}
<!---/**************************************************/--->

img.buttonUlti{
    float:right;
    padding-top:30px;
    padding-bottom:15px;
    border-radius:18px;
}

.shiftRes{
    margin-left:27px;
    padding-top:40px;
}

.departstyle{
    font-size: 18px !important;
    font-weight:bold;
    padding-left: 10px;
    margin: 0 0 7px 0;
    padding-top: 17px;
}

.resstyle{
    font-size: 18px !important;
    font-weight:bold;
    margin: 0 0 7px 0;
    padding-left: 20px;
}
</style>

<div id="wrapper">

    <!-- banner-wrap starts here -->
    <div id="banner-wrapper">                                       
                <!-- Menu Tabs -->

            <ul>
                <li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:white !important">|</span>&nbsp;<a href="Resources.cfm"><span>Support</span></a></li>

            </ul>
    </div>

    <div id="sidebarright">
        <a href="https://n11.ultipro.com/logout.aspx"><img class="buttonUlti" src="img/Pro.jpg" alt="Pro" /></a>
        <div class="resstyle">Resources</div>       
    </div>

<div id="sidebarleft">
        <ul class="menu">
            <li class="departstyle">Departments</li>
            <li class="leftbuttons1"><a href="#">Claims</a></li>
            <li class="leftbuttons"><a href="#.cfm?">Credentialing</a></li>
            <li class="leftbuttons"><a href="#.cfm">Customer Services</a></li>
            <li class="leftbuttons"><a href="#.cfm">Data Management</a></li>
            <li class="leftbuttons"><a href="#.cfm">Decision Support</a></li>
            <li class="leftbuttons"><a href="#.cfm">Employee Services</a></li>
            <li class="leftbuttons"><a href="#.cfm">Finance</a></li>
            <li class="leftbuttons"><a href="#.cfm">HCC</a></li>
            <li class="leftbuttons2"><a href="#.cfm">Health System <br />Engagement and<br /> Contracting</a></li>  
            <li class="leftbuttons"><a href="#.cfm" target="_blank">Mail Room</a></li>
            <li class="leftbuttons"><a href="#.cfm">Marcom</a></li>
            <li class="leftbuttons"><a href="#.cfm">Medical Management</a></li>
            <li class="leftbuttons"><a href="#.cfm">Network Management</a></li>
            <li class="leftbuttons"><a href="#.cfm">NextGen</a></li>
            <li class="leftbuttons"><a href="#.cfm">Operations</a></li>
            <li class="leftbuttons"><a href="#.cfm">Physician Resources</a></li>
            <li class="leftbuttons"><a href="#.cfm">Provider Relations</a></li>
            <li class="leftbuttons"><a href="#.cfm">Quality Management</a></li>
            <li class="leftbuttons"><a href="#.cfm">Quality Improvement</a></li>
            <li class="leftbuttons"><a href="#.cfm">Risk Management</a></li>            
        </ul>
</div>

任何帮助将不胜感激，谢谢

Answer 1

如果你想让它漂浮在#banner-wrapper的右边，你还必须浮动那个（浮动：左) and give it宽度：70％`（并删除自动边距），这样它们就可以了适合彼此：

http://codepen.io/anon/pen/gMLVKV

Answer 2

因此，使用您更新的代码，您的css未被应用，因为您使用的注释对于css不正确。您在css中使用HTML注释而不是正确的/* this is a comment */

无效：

<!---/**************************************************/--->

<强>有效：

/**************************************************/

JSFiddle

不确定为什么Div没有浮动到右边

2 个答案: