浮動的CSS問題

2

試試這個。（總是做float：right，float：left，center，clear：both） - 注意關閉你的圖片標籤。這個帖子的

<div id="header"> 
     <div class="user-header"> 
      <label class="user"></label> 
       <a class="" href="#">Logout</a> 
     </div> 
     <div class="logo"> 
      <a href="index.php"><img src="#"/></a> 
     </div> 
     <div class="company-header"> 
      <a title="title" href="index.php"><b>Hello</b></a> 
     </div> 
     <div style="clear:both; height:1px; width:99%" ></div> 
    </div> 

#header { 
    width: 600px; 
    background-color: #585D63; 
    padding: 15px 0px; 
} 

#header .logo { 
    float: left; 
    margin-left: 30px; 
} 

#header .logo img { 
    height: auto; 
} 

#header .company-header { 
    font-size: 150%; 
    letter-spacing: 1px; 
    text-align: center; 
    width: 200px; 
    margin: 0 auto; 
} 

#header .user-header { 
    float: right; 
    margin-right: 30px; 
} 

#header .user-header a { 
    max-width: 120px; 
    height: auto; 
}

重複：

How to align 3 divs (left/center/right) inside another div?

爲了解釋，據我瞭解的問題，當瀏覽器繪製的頁面，它會呈現中心內容，首先因爲它的過程該頁面按照邏輯順序。然後應用浮動這就是爲什麼右側掛起。但是通過首先添加浮點數，在渲染中心將內容向右浮動之前，瀏覽器會知道浮點數，因爲它會在第一種情況下左中右，在第二個右上角中心。如果這是有道理的。處理操作的順序。

來源

2014-07-07 02:45:51 ArtisticPhoenix

+0

感謝，簡單地重新排列順序（左，右，中）的HTML divs做了詭計！哎呀，我沒有做足夠的研究，我猜想類似的問題！非常感謝。 –

+0

當然，如果我回想一些老版本的IE更喜歡這個順序，但我不應該太過分了〜只是想我會提到爲什麼我先做了正確的一個，只是習慣 – ArtisticPhoenix

1

你根本沒有做數學的權利。 div class="user-header"沒有足夠的空間放置在RH側。請參閱JSFiddle with borders。

編輯：你需要浮動：還有div class="company-header"以及：live demo。

使用的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Live demo</title> 
<style> 
div { 
    border: 1px solid black; /* added */ 
} 
#header { 
    width: 600px; 
    height: 60px;    /* added */ 
    background-color: #585D63; 
    padding: 15px 0px; 
} 
#header .logo { 
    float: left; 
    width: 33%; 
    max-width: 180px; 
    padding: 5px 30px; 
} 
#header .logo img { 
    max-width: 120px; 
    height: auto; 
} 
#header .company-header { 
    font-size: 150%; 
    letter-spacing: 1px; 
    margin: 0 auto; 
    width: 33%; 
    text-align: center; 
    float: left;    /* added */ 
} 
#header .user-header { 
    float: right; 
    w/idth: 33%;    /* de-activated */ 
    max-width: 180px; 
    padding: 5px 30px; 
} 
#header .user-header a { 
    max-width: 120px; 
    height: auto; 
} 
    </style> 
</head> 
<body> 
    <div id="header"> 
     <div class="logo"> 
      <a href="index.php"><img src="#"></a> 
     </div> 
     <div class="company-header"> 
      <a title="title" href="index.php"> 
       <b>Hello</b> 
      </a> 
     </div> 
     <div class="user-header"> 
      <label class="user"></label> 
      <a class="" href="#">Logout</a> 
     </div> 
    </div> 
</body> 
</html>

來源

2014-07-07 02:51:11

+0

嘗試用較低的寬度？你能證明它的工作原理嗎？ – ArtisticPhoenix

+0

不，但您可以自由編輯小提琴。 –

+0

我做了，但它仍然不起作用http://jsfiddle.net/xVXPk/16/，但我的。 – ArtisticPhoenix

-1

添加類錨：<a class="logout" href="#">Logout</a>

CSS：

#header { 
    position: relative; 
} 

.logout { 
    line-height: 58px; /* Same height as #header */ 
    position: absolute; 
    top: 0; 
    right: 30px; /* Same padding-left of logo */ 
}

DEMO

來源

2014-07-07 03:03:25 Matthew

+0

負邊距，有點破解 - 不是漂浮物品的正確方式，我們可能只是絕對的位置。 – ArtisticPhoenix

+0

@ArtisiticPhoenix它雖然工作！ – Matthew

+0

@ArtisiticPhoenix我絕對定位它與行高。 – Matthew

浮動的CSS問題

回答

相關問題