HTML 클래스의 크기가 변경되면 위치가 변경됩니다.

디자인이 this 인 간단한 웹 페이지를 디자인하려고합니다.HTML 클래스의 크기가 변경되면 위치가 변경됩니다.

그러나 웹 사이트를 거의 모든 크기의 창에 맞추기 위해 노력하고 있는데, .gameInfo 클래스가 창 크기가 두 개의 결합 된 너비보다 작은 경우 .playerList 클래스의 맨 위로 점프합니다. 결과는 this처럼 보입니다.

분명히 이것은 매우 못 생겼고, 내 목표는 .gameInfo과 .playerList을 가능한 한 평행하게하려고하는 것입니다. 내 다음 코드는 다음과 같습니다

index.html을 :

<body> 
    <div id="container"> 
     <div class="gameState"> 
     </div> 

     <div class="gameInfo"> 
     </div> 

     <div class="playerList"> 
     </div> 
    </div> 
</body>

있는 style.css

body{ 
    background-color: #FAF7F8; 
    font-family: "Calibri", sans-serif; 
    margin: 0px; 
    padding: 0px; 
} 

#container{ 
    width: 89%; 
    margin: 0 auto; 
} 

.playerList{ 
    float: right; 
    background-color: #EDEDED; 
    border: 1px solid; 
    border-color: #D4D4D4; 
    width: 123px; 
    height: 340px; 
    text-align: center; 
    font-size: 45px; 
    color: black; 
} 

.gameInfo{ 
    float: left; 
    width: 89%; 
    background-color: #EDEDED; 
    border: 1px solid; 
    border-color: #D4D4D4; 
    height: 340px; 
} 

.gameState{ 
    background-color: #EDEDED; 
    margin: 12px auto 12px auto; 
    border: 1px solid; 
    border-color: #D4D4D4; 
    width: 100%; 
    height: 64px; 
    text-align: center; 
    font-size: 45px; 
    color: black; 
}

출처

2012-12-09 k9rosie

글쎄, 당신은 고정 비율을 기반으로 폭을 혼합하고, 그래서 이것이 예상 된 행동이라고 생각하십시오.

.gameInfo 페이지의 89 % 인 경우 은 최대 11 %를 얻습니다. 문제는 .playerList은 고정 폭 (123px)을 가지므로 페이지의 11 %보다 큰 경우 .gameInfo은 그와 나란히 맞지 않습니다.

편집 : 이 그것을 적당한 유체 고정 레이아웃 : 당신은 페이지가 반응 할 것인지

<body> 
    <div id="container"> 
     <div class="gameState"></div> 
     <div class="playerList"></div> 
     <div class="gameInfo"></div> 
    </div> 
</body> 

body{ 
    background-color: #FAF7F8; 
    font-family: "Calibri", sans-serif; 
    margin: 0px; 
    padding: 0px; 
} 

#container{ 
    width: 89%; 
    margin: 0 auto; 
} 

.playerList{ 
    float: right; 
    background-color: #EDEDED; 
    border: 1px solid; 
    border-color: #D4D4D4; 
    width: 123px; 
    height: 340px; 
    text-align: center; 
    font-size: 45px; 
    color: black; 
} 

.gameInfo{ 
    margin-right: 130px; 
    background-color: #EDEDED; 
    border: 1px solid; 
    border-color: #D4D4D4; 
    height: 340px; 
} 

.gameState{ 
    background-color: #EDEDED; 
    margin: 12px auto 12px auto; 
    border: 1px solid; 
    border-color: #D4D4D4; 
    width: 100%; 
    height: 64px; 
    text-align: center; 
    font-size: 45px; 
    color: black; 
}

출처

2012-12-09 02:32:55 rdiazv

.playerList의 고정 너비를 유지하면서 창 너비에 따라 .gameInfo의 크기를 조정하는 방법은 무엇입니까? – k9rosie

내 편집 내용보기 – rdiazv

해결책을 찾았는데 창이 전체 너비에 이르면이 결과를 얻습니다. [http://i.imgur.com/htCR6.png](http://i.imgur. com/htCR6.png) – k9rosie

당신은이 문제에 대한 @media 쿼리를 사용할 수 있습니다. 그런 식으로

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

, 사용자가 설정하거나 브라우저의 특정 크기에 따라 크기와 위치를 변경할 수 있습니다. 그것은 쉽고 오늘날 동향 중 하나입니다.

출처

2012-12-09 02:37:52

두 가지 종류의 너비, 픽셀 및 백분율을 혼합하는 것이 문제입니다. 브라우저 창과 컨테이너 div의 크기를 조절할 때 .playerList의 11 %는 어느 시점에서 123px보다 작습니다.

내가 말할 것이 가장 간단한 해결책은, 때문에 국경 사이의 공간을 조금 남겨 두는 .playerInfo 폭보다 .gameInfomargin-right:30px; (조금 더주고있다. 당신을 또한 한 폭을 제거하고의 속성을 떠 . .gameInfo, 그것은 .playerInfo 옆에 표시하고 모든 수평으로 사용 가능한 공간을 차지 (당신이 부동 .playerInfo HTML로 먼저 올 수 있도록해야 할) 수 있도록

여기에 언급 된 변화와 코드를 참조하십시오 : http://jsfiddle.net/qyKny/7/

편집 : r과 동일한 솔루션 diazv는 단지 1 분 전이지만 자세한 설명과 jsfiddle 링크를 위해 여기를 남겨 둘 것입니다.

출처

2012-12-09 02:39:34 amulware

HTML 클래스의 크기가 변경되면 위치가 변경됩니다.

답변

관련 문제