html - float 不适用于 div

标签 html css css-float

enter image description here我给了这个 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 -->

最佳答案

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

关于html - float 不适用于 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14825465/

相关文章:

css - 标签文本溢出时应用省略号

html - 将带有 float 子元素的 div 扩展到它们的全高

html - 字符串在手机上显示不正确?

css - 有没有办法在 CSS 中制作圆锥曲线动画?

javascript - 为什么我的 jQuery slidedown 在我的表中不起作用?

javascript - 如何将一张图片与另一张图片叠加?

javascript - 我的滚动在 samsung android Mobile 中不起作用,但在所有浏览器和设备中都可以正常工作?

css - 如何在纯 CSS 中创建等高列

php - 存储 SQL 结果以在其他网页上使用

javascript - 如何在函数内显示带有超链接的 JavaScript 图像