2014-04-09 4 views
0

이것은 당신이 볼 수 있듯이, 나는 큰 DIV 컨테이너 내부의 여러 div의이 내 코드 >>http://jsfiddle.net/374Rk/1/사업부 내부 Div 사업부?

<div class="container"> 
    <div class="logo"></div> 
    <div class="buttons"></div> 
    <div class="chef"></div> 
    <div class="social"></div> 
</div> 

입니다. 모든 것이 중심이지만 모든 권리가 20 px의 여백과 함께 오른쪽에 붙여지기를 원합니다. 어떤 방법이 최선의 방법입니까?

내가 사회적으로 상대적인 위치를 부여한다면, 590px의 적절한 속성을 추가하기 만하면됩니다. 이것을 올바른 방법일까요? 그것은 우아하지 않습니다! 또한, 만약 내가 그것을 오른쪽으로 뜨면, 컨테이너에 더 이상 있지 않을 것입니다 (왜냐하면 나는 그것을 플로팅 시켰습니다).

이것은 CSS 작업을하는 동안 항상 나를 괴롭 히고 있습니다. 너희들도 도울 수 있기를!

답변

1

당신이해야 할 일은 .social-div의 플로팅을 오른쪽으로 설정하는 것입니다. clearfix 도울 수있는 래퍼는 여전히 차일을 모두 마무리하도록하려면 :

HTML :

<div class="container"> 
    <div class="logo"></div> 
    <div class="buttons"></div> 
    <div class="chef"></div> 
    <div class="social"></div> 
    <div style="clear:both;"></div> 
</div> 

CSS :

.social { 
    width: 200px; 
    height: 25px; 
    float:right; 
    margin-right:20px; 
    background-color: #FF0; 
} 

http://jsfiddle.net/AvLU8/

+0

고마워요! 영리하고 우아한 수정 방법! : D 또한 .container with Overflow : 자동은 clear를 사용하여 새 div를 추가하지 않고 작동합니다. 둘 다! – Klaha

0

확인이

http://jsfiddle.net/374Rk/17/

.social{ 
    width: 200px; 
    height: 25px; 
    background-color: #FF0; 
    margin-right:0px; 
    margin-left:590px; 
} 
+0

$(document).ready(function() { $('.container div').each(function() { container = $(this).attr('class'); content = $(this); if(content == "social"){ $(".container").addClass("social"); } }); }); 

확인은하지만 더 이상 용기에 아니에요! 바이올린을 확인하고 회색 컨테이너에 플로트하지 말고 그대로 둡니다. 그것이 내가 알고 싶은 것, 컨테이너를 떠나지 않고 상대 위치 + 오른쪽 : 590px를 사용하지 않고 오른쪽으로 정렬하는 방법입니다. – Klaha

0

당신이 (그리고 올바른 모든 것을) 부동하지 않으려면, 당신은 .social.containerdisplay: inline-block; margin-right: 20px;text-align: right;를 추가 할 수 있습니다.

http://jsfiddle.net/374Rk/3/

하지만 각 사업부 내에서 원하는 것을 모른다. 따라서 각 divtext-align: left;을 추가해야합니다.

0

마르티네스,
나는 밖으로 읽고 귀하의 쿼리 및 JQuery를 사용하여 솔루션을 찾으십시오. 나는 그것을 떠 경우 URL을
아래 http://jsfiddle.net/374Rk/30/