html - float 不适用于 div

Question

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

欢迎和邮件 ID 应该与公司 Logo 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 -->

Answer 1

在这种情况下，您必须逐个排列 div。为每个 div 提供一个 float left。并为每个 div 设置一个高度和宽度。之后将此 div 包含在另一个主 div 中。我很快就会包含 jsfiddle