이런 식으로 하나의 div에 두 개의 요소를 배치하는 방법

-1

웹 페이지가 반응하는 두 개의 div를 나란히 배치하고 싶습니다. 부트 스트랩 col-md-6과 비슷한 두 개의 div를 사용하여 구현했습니다. class = btn을 사용하면 더 간단한 방법이 있어야합니다. 어떤 종류의 해결책든지 환영된다.이런 식으로 하나의 div에 두 개의 요소를 배치하는 방법

JSbin

HTML :

<div class="cont"> 
    <div class="btn blue"></div> 
</div> 
<div class="cont"> 
    <div class="btn red"></div> 
</div>

CSS :

.cont{ 
    display:inline-block; 
    width:50%; 
    height:100px; 
    background:#eee; 
    padding:10px 5px; 
    box-sizing:border-box; 
} 
.btn{ 
    width:100px; 
    height:80px; 
} 
.red{ 
    background:red; 
    float:left; 
} 
.blue{ 
    background:blue; 
    float:right; 
}

출처

2014-07-05 Sagi_Avinash_Varma

실제 목표는 무엇입니까? 귀하의 사이트는 반응 형입니다. 어떻게 행동하길 원하니? – joelschmid

"이 같은 단일 div에 두 요소를 배치하는 방법"- 무엇을 좋아합니까? –

@desperado 2 개의 div.btn이 중앙에 배치되고 나란히 놓여져 있으므로 두 개의 divs.cont 을 사용해야했지만 div.btn을 div.cont에 두 개 배치하고 같은 방식으로 작동해야합니다. 지금 –

display: flex 예를 살펴 보자 에 http://css-tricks.com/snippets/css/a-guide-to-flexbox/

나는 그것이 당신이 찾고있는 정확하게 것 같아요.

출처

2014-07-05 14:10:12

Flexbox는 얼마나 잘 지원됩니까? –

Android 브라우저를 제외한 모두 : http://caniuse.com/flexbox –

음. 어제 우리 모두가 입양되기를 바라고 있었던 것 같습니다. IE 지원 (11 개 미만인 것으로 나타남)은 계속 될 수 있지만 채택 된 것을 기쁘게 생각합니다. –

이 시도 :

.cont{ 
    margin: 0 auto; // added 
    display:inline-block; 
    width:50%; 
    height:100px; 
    background:#eee; 
    padding:10px 5px; 
    box-sizing:border-box; 

}

다른 예 :

<div class="wrapper" style="margin: 0 auto; width: 200px"> 
    <div class="inner1" style="width: 100px; float:left;"></div> 
    <div class="inner2" style="width: 100px; margin-left: 100px"></div> 
</div>

출처

2014-07-05 14:12:43 joelschmid

그래서 당신이 무슨 뜻입니까?

HTML

<div class="cont"> 
    <div class="btn blue"></div> 
    <div class="btn red"></div> 
</div>

CSS

.cont{ 
     margin: 0 auto; // added from desparado 
     width:50%; 
     height:100px; 
     background:#eee; 
     padding:10px 5px; 
     box-sizing:border-box; 
    } 

    .btn{ 
     width:100px; 
     height:80px; 
    } 

    .red{ 
     background:red; 
     float:left; 
    } 

    .blue{ 
     background:blue; 
     float:right; 
    }

당신은 인라인 블록 마진 자동차를 교환하고 추가로 용기에 포장하여 주위를 재생할 수 있습니다.

버튼에 특정 폭을 부여 했으므로 컨테이너 너비를 설정하고 margin width를 auto로 설정하면 찾고있는 것을 얻을 수 있다고 생각합니다.

출처

2014-07-05 15:05:40 naiJenn

이런 식으로 하나의 div에 두 개의 요소를 배치하는 방법

답변

관련 문제