2013-02-12 107 views
0

enter image description here我给左浮动到这个div,但它不是向左移动到它上面的div .....浮球不工作的div

的欢迎和邮件ID应该是邻近公司的标志DIV ....

每格应水平排列

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

<div style="float: left;"> 
         <p>welcome xyz! [email protected]</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! [email protected]</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 --> 
+0

你能更清楚?你能说出的div和安排?将样式放在jsfiddle中给出的CSS部分中。 – arjuncc 2013-02-12 04:42:05

+0

可能是预期产出的粗略数字? – arjuncc 2013-02-12 04:51:26

回答

2

在这种情况下,你必须安排div div。为每个div提供一个浮动值。并且为每个div设定一个高度。之后,将这个div包含在另一个主div中。我将包括的jsfiddle很快

+0

等待你的小提琴我很困惑 – user2045025 2013-02-12 05:10:04

+1

这是jsfiddle http://jsfiddle.net/VznR8/ – arjuncc 2013-02-12 05:14:58

+0

@ user2045025这是否解决您的问题? – arjuncc 2013-02-12 05:19:49

0

提高您的导航栏的宽度,然后它会留下来顶格

+0

可以更新在小提琴http://jsfiddle.net/TdcRJ/7/ – user2045025 2013-02-12 05:36:03

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! [email protected]</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> 
+0

看到这个http://jsfiddle.net/TdcRJ/8/ – 2013-02-12 05:24:44

+0

但公司的标志div应该是第一.... – user2045025 2013-02-12 05:31:12