부모 div 내에서 2 개의 고정 폭 div를 나란히 정렬합니다

부모 div 내에서 정확히 2 개의 div를 얻으려고합니다. 두 하위 div 모두 상위 div의 높이를 사용합니다. float : 왼쪽 및 오른쪽 여백 : 0 자동 시도했습니다. 하나의 div가 가운데에오고 다른 하나는 약간 상쇄되기를 원하지 않습니다. Div 2 오른쪽 사이드가 정확한 센터에있는 동안 div 1 오른쪽이 정확한 센터에 있도록하고 싶습니다. (나는 CSS를 사용하는 것을 선호하지만 필요한 경우 JS는 괜찮을 것이다). 여기 부모 div 내에서 2 개의 고정 폭 div를 나란히 정렬합니다

<div class="green"> 
    <div class="div1"> 
     Div 1 
    </div> 
    <div class="div2"> 
     Div 2 
    </div> 
</div>

는 CSS입니다 :

.green { 
    height:50px; 
    width:100%; 
    background-color:#9fbe3c; 
} 
.div1 { 
    height:100%; 
    width:141px; 
    margin:0 auto; 
} 
.div2 { 
    width:141px; 
    height:100%; 
    float:right; 
    position:relative; 
    top:-50px; 
}

Fiddle

어떤 이유로 DIV 2의 부모 블록에서 밀려 있었다 여기

는 HTML입니다. 나는 display : inline-block을 시도했으나 작동하지 않아서 단지 상대적인 위치를 사용했다.

출처

2014-07-13 sanfosr

시각적 이미지를 제공 할 수 있습니까? 원하는 출력을 이해할 수 없기 때문입니다. – Tushar

[this] (http://codepen.io/tusharbandal/pen/umrKp)를 찾으십니까? – Tushar

[IMG] http://i61.tinypic.com/2412ni0.png [/ IMG] @Tushar 예, 정확히 무엇인가 이유로 변경 사항을 적용했으며 두 div가 모두 상위 블록 왼쪽에 있습니다 – sanfosr

당신은 this

HTML

<div class="green"> 
    <div class="div1"> 
     Div 1 
    </div> 
    <div class="div2"> 
     Div 2 
    </div> 
</div>

CSS 여백/플로트 로직을 제거하는 동안 text-align: center 및 display: inline-block를 추가

.green { 
    height:50px; 
    width:100%; 
    background-color:#9fbe3c; 
    text-align: center; 
} 
.div1, .div2 { 
    height:100%; 
    width:141px; 
    margin:0 auto; 
    display: inline-block 
}

출처

2014-07-13 06:06:14 Tushar

시도처럼 그것을 할 수 있습니다. 이 도움이 http://jsfiddle.net/Gad4C/9/

희망 : 여기

수정 된 바이올린입니다.

출처

2014-07-13 06:08:46 link

네, 이것이 바로 그 것입니다. 항상 잊어 버리는 간단한 일입니다. 정말 고마워! – sanfosr

부모 div 내에서 2 개의 고정 폭 div를 나란히 정렬합니다

답변

관련 문제