浮动不在div上工作

时间：2013-02-12 04:38:48

标签： html css html5 css3 css-float

enter image description here我给了这个div左边的浮动，但它没有向左移动到它的上面的div .....

欢迎和邮件ID应与公司徽标div相邻....

每个div应该水平对齐

http://jsfiddle.net/TdcRJ/7/ 

 <div style="float: left;">
                        <p>welcome xyz! xyz@defie.co</p>
                    </div>
providing my code below

<div style="
    display: inline-block;
">
                    <a class="brand" href="&lt;?= HOME_URL ;?&gt;" style="">
                    Company LOGO
                    </a>
                </div>
                <div style="clear: left;">
                    <p>47657 Lakeview Blvd</p>
                    <p>Fremont CA 94538</p>
                    <p>510-657-8981</p>
                </div>

                <div style="float: left;">
                    <p>welcome xyz! xyz@defie.co</p>
                </div>

                <div class="inline" style="padding-top: 12px;">

                        <ul class="homePageLists" style="">
                            <li style="padding-bottom: 5px; list-style: none; color: #333;">
                                <a style="color: #333;" href="http://www.w3schools.com/" target="_blank">
                                  <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_menu.png">
                                   Menu
                                </a>
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; color: #; ">
                                <a style="color: #653921;" href="http://www.w3schools.com/" target="_blank">
                                  <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
                                  Inventory
                                </a>
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; color: #653921; ">
                                <a style="color: #653921;" href="http://www.w3schools.com/" target="_blank">
                                  <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
                                  BOM List
                                </a>
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; color: #653921; ">
                                <a style="color: #653921;" href="http://www.w3schools.com/" target="_blank">
                                    <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
                                    Sub BOM List
                                </a>
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; color: #9e1c20; ">
                                <a style="color: #9e1c20;" href="http://www.w3schools.com/" target="_blank">
                                    <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_product.png">
                                    Product
                                </a>
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; color: #ff5100; ">
                                <a style="color: #ff5100;" href="http://www.w3schools.com/" target="_blank">
                                    <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_customer.png">
                                    Customer List
                                </a>
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; color: #184179;">
                                <a style="color: #ff5100;" href="http://www.w3schools.com/" target="_blank">
                                    <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png">
                                    Vendor List
                                </a>
                            </li>
                        </ul>

                </div><!--/.nav-collapse -->

3 个答案:

答案 0 :(得分：2)

在这种情况下，您必须按div排列div。为每个div提供一个浮动。并为每个div设置一个高度。之后，在另一个主div中包含这个div。我将很快包括jsfiddle

答案 1 :(得分：1)

试试这个

    <div class="companyLogo" style="width: 1009px;">
    <div style="width: 400px;height: 120px;">
    <div style="float:right;margin-top: -8px;">
    <a class="brand" href="&lt;?= HOME_URL ;?&gt;" style="">
        Company LOGO
        </a>

    <div style="clear: left;">
    <p>47657 Lakeview Blvd</p>
    <p>Fremont CA 94538</p>
    <p>510-657-8981</p>
    </div></div>

    <div style="float: left;">
    <p>welcome xyz! xyz@defie.co</p>
    </div>
    </div>
   <div class="inline" style="padding-top: 12px;">

    <ul class="homePageLists" style="">
     <li style="padding-bottom: 5px; list-style: none; color: #333;">
     <a style="color: #333;" href="http://www.w3schools.com/" target="_blank">
   <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_menu.png">
                                       Menu
                                    </a>
                                </li>
                                <li style="padding-bottom: 5px; list-style: none; color: #; ">
                                    <a style="color: #653921;" href="http://www.w3schools.com/" target="_blank">
                                      <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
                                      Inventory
                                    </a>
                                </li>
                                <li style="padding-bottom: 5px; list-style: none; color: #653921; ">
                                    <a style="color: #653921;" href="http://www.w3schools.com/" target="_blank">
                                      <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
                                      BOM List
                                    </a>
                                </li>
                                <li style="padding-bottom: 5px; list-style: none; color: #653921; ">
                                    <a style="color: #653921;" href="http://www.w3schools.com/" target="_blank">
                                        <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
                                        Sub BOM List
                                    </a>
                                </li>
                                <li style="padding-bottom: 5px; list-style: none; color: #9e1c20; ">
                                    <a style="color: #9e1c20;" href="http://www.w3schools.com/" target="_blank">
                                        <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_product.png">
                                        Product
                                    </a>
                                </li>
                                <li style="padding-bottom: 5px; list-style: none; color: #ff5100; ">
                                    <a style="color: #ff5100;" href="http://www.w3schools.com/" target="_blank">
                                        <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_customer.png">
                                        Customer List
                                    </a>
                                </li>
                                <li style="padding-bottom: 5px; list-style: none; color: #184179;">
                                    <a style="color: #ff5100;" href="http://www.w3schools.com/" target="_blank">
                                        <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png">
                                        Vendor List
                                    </a>
                                </li>
                            </ul>

                    </div><!--/.nav-collapse -->

                    <div>
                        <p>ABC Systems</p>
                        <p>1234 lakeview Blvd</p>
                        <p>CA 94538</p>
                        <p>510-657-8981</p>
                    </div>


                </div>

答案 2 :(得分：0)

增加导航栏的宽度，然后它将离开顶部div

相关问题
最新问题