동적 인 너비를 가진 부모를 확장하지 않고 오른쪽 div div를 정렬하십시오.

Question

나는이 것을 찾는 데 어려움을 겪고 있습니다.

본문의 가운데에 div가 있습니다. margin: 0 auto;. 여러 div가 포함되어 있습니다. 가장 넓은 자식의 너비로 확장하고 싶습니다. width: auto;

문제는 오른쪽에 자식 div가 정렬되도록하고 싶지만 부모를 100 % 확장합니다. 부모를위한 고정 너비가 없으면 어떻게해야합니까?

Answer 1

래퍼 div를 inline-block으로 설정하고 text-align: center을 부모 (margin: 0 auto; 대신)로 설정하면 이후의 작업을 수행 할 수 있습니다. 여기 http://jsfiddle.net/joshnh/6Ake5/

되는 HTML된다 :

<div class="wrapper"> 
    <div class="foo"></div> 
    <div></div> 
    <div></div> 
</div> 

그리고 CSS :

body { 
    text-align: center; 
} 
div { 
    border: 1px solid red; /* To see what is going on */ 
} 
.wrapper { 
    display: inline-block; 
    text-align: left; /* Resetting the text alignment */ 
    vertical-align: top; /* Making sure inline-block element align to the top */ 
    /* Inline-block fix for IE7 and below */ 
    zoom: 1; 
    *display: inline; 
} 
.wrapper div { 
    float: left; 
    height: 200px; /* To see what is going on */ 
    margin: 10px; /* To see what is going on */ 
    width: 200px; /* To see what is going on */ 
} 
.foo { 
    border-color: blue; /* To see what is going on */ 
    float: right; 
}​