플로트의 CSS 문제

일부 요소가 떠 다니는 데 문제가 있습니다. 나는 here 예제를 다시 만들었다.플로트의 CSS 문제

기본적으로 오른쪽에 Logout을 표시하고 싶지만 (이미지가 왼쪽에 표시되는 것처럼) 문제가 있습니다. 로고가 올바르게 바로 떠있는 동안

당신이 .logo 및 user-header에서 float: left 그 반대와 float: right를 교환하는 경우

, Logout은 여전히 새 행에 나타납니다.

나는 여기에서 명백한 것을 놓치고 있다고 느낍니다.

아이디어가 있으십니까?

감사합니다.

출처

2014-07-07 Travis Liew

http://jsfiddle.net/xVXPk/15/

이보십시오. (항상 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

감사합니다, 단순히 순서를 재 배열 (왼쪽, 오른쪽, 가운데) HTML div 중 트릭을 만들었습니다! Ooops, 나는 비슷한 문제에 대한 충분한 연구를하지 않았다. 고마워. –

IE의 이전 버전이이 순서를 선호한다고 생각한다면, 여전히 오른쪽, 왼쪽, 중앙을 좋아할 것입니다.하지만 많은 문제가되어서는 안됩니다 ~ 그냥 내가 왜 올바른 것을 먼저했는지, 그냥 습관을 언급했는지 생각하면 안됩니다 – ArtisticPhoenix

당신은 단순히 수학을 제대로하지 않았을 것입니다. div class="user-header"이 RH쪽에 위치 할 수있는 공간이 충분하지 않습니다. JSFiddle with borders을 참조하십시오.

편집 : float해야합니다. 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

낮은 너비로 시도해 볼까요? 그런 식으로 일할 수 있습니까? – ArtisticPhoenix

아니요,하지만 당신은 바이올린을 자유롭게 편집 할 수 있습니다. –

나는했는데 여전히 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

음수 여백은 약간의 해킹입니다. 항목을 떠 다니는 적절한 방법이 아니라 절대 위치를 지정할 수도 있습니다. – ArtisticPhoenix

플로트의 CSS 문제

답변

관련 문제