두 div를 균등하게 정렬하는 방법

다음 이미지에서와 같이 내 pafe 섹션을 렌더링하려고합니다. http://i.imgur.com/63q9Syr.jpg 작은 화면 (미디어 대기열 사용)에서 제대로 작동하도록 만드는 동안 화면 크기가 768px를 초과 할 수 없습니다. 2 개의 상자가 겹치거나 상자 양쪽의 공간이 짝이 맞지 않습니다. 내가 고칠 수있는 방법이 있니?두 div를 균등하게 정렬하는 방법

<section class="carousel price-carousel"> 
    <div class="container"> 

     <div class="price-Container"> 
      <div class="month-column"> 
        <h4>Monthly</h4> 
        <p>$9.95</p> 
        <p class=”sub-text”>per computer</p> 
      </div> 
      <div class="year-column"> 

        <h4>Yearly</h4> 
        <p>$99</p> 
        <p class=”sub-text”>Save 20% when you pay anually</p> 
       </div> 
     </div> 
</div> 
</section>

JSFiddle : http://jsfiddle.net/d4gyo5s8/이

출처

2014-09-23 user3861559

는 왜 회전 목마를 사용합니까? 두 번 이상의 발표가 있고 한 번에 2 개를 보여주고 싶습니까? –

carousel은 다른 섹션에 걸쳐있는 글꼴 묶음을 묶는 데 사용하는 클래스 이름입니다. 내 페이지의 이미지를 표시하려고합니다. – user3861559

float 대신 다음과 같이 인라인 블록을 사용합니다.

.container { 
 
    margin: 0 auto; 
 
    max-width:1050px; 
 
} 
 

 
.price-carousel{ 
 
    background-color: #eee; 
 
    float:left; 
 
    height:auto; 
 
    margin-top: 10px; 
 
    padding-bottom: 10px; 
 
    width:100%;  
 
} 
 
.price-Container { 
 
    text-align: center; /* this will center the month and year columns */ 
 
} 
 

 
.price-carousel .month-column{ 
 
    background-color: #fff; 
 
    border: 1px solid; 
 
    display: inline-block; /* add this line instead of float */ 
 
    height:120px; 
 
    margin-left: 0; 
 
    margin-top:35px; 
 
    text-align: center; 
 
    width:240px; 
 
} 
 
.price-carousel .year-column{ 
 
    border: 1px solid; 
 
    background-color: #fff; 
 
    display: inline-block; /* add this line instead of float */ 
 
    height:120px; 
 
    margin-left: 30px; 
 
    margin-right: -10%; 
 
    margin-top:35px; 
 
    text-align: center; 
 
    width:240px; 
 
} 
 
.price-carousel .year-column h4, .price-carousel .month-column h4{ 
 
    background-color: #676767; 
 
    color: #fff; 
 
    height: 25px; 
 
    margin-top: 0px; 
 
    padding-top:5px; 
 
    width: 100%; 
 
}

<section class="carousel price-carousel"> <!--Price section --> 
 
     <div class="container"> 
 
      <div class="price-Container"> 
 
       <div class="month-column"> 
 
         <h4>Monthly</h4> 
 
         <p>$9.95</p> 
 
         <p class=”sub-text”>per computer</p> 
 
       </div> 
 
       <div class="year-column"> 
 
         <h4>Yearly</h4> 
 
         <p>$99</p> 
 
         <p class=”sub-text”>Save 20% when you pay anually</p> 
 
        </div> 
 
      </div> 
 
    </div> 
 
    </section>

출처

2014-09-23 18:59:10

완벽하게 잘 작동합니다. 고맙습니다.하지만, 더 작은 화면 크기로 미디어 쿼리를 사용하면 두 번째가 조금 위쪽으로 정렬됩니다. 내가 고칠 수있는 방법이 있니? http://jsfiddle.net/d4gyo5s8/7/ – user3861559

작은 화면의 경우 두 열에 30 %의 너비를 적용합니다. 이렇게하면 오른쪽 열 텍스트를 두 번째 줄로 감싸므로 높이가 증가하므로 오프셋이 증가합니다. 열을 더 넓게 만들거나 두 열 CSS 규칙 각각에'vertical-align : bottom'을 추가하여이를 수정할 수 있습니다. 미디어 쿼리 버전이 아닌 일반 CSS에 추가 할 수 있습니다. 참조 : http://jsfiddle.net/audetwebdesign/d4gyo5s8/8/ –

http://jsfiddle.net/um0nyna3/

HTML :

<div class="wrapper"> 
    <div class="leftcol"> 
     test 
    </div> 
    <div class="rightcol"> 
     test 
    </div> 
</div>

CSS :

.wrapper { 
    width: 500px; 
    margin: 0 auto; 
} 
.leftcol { 
    float: left; 
    width: 49%; 
    background-color: lightblue; 
    margin-right: .5%; 
    margin-left: .5%; 
} 
.rightcol { 
    float: left; 
    width: 49%; 
    background-color: lightgreen; 
    margin-right: .5%; 
    margin-left: .5%; 
}

이 Heres는 좋은 기본이 시작하기 위해 와.

기본적으로 반응 형 사이트의 경우에도 모든 너비를 백분율로 설정해야합니다. 왼쪽 또는 오른쪽 여백/여백도 백분율이어야합니다. 이것을 시험해보십시오. 나는 당신에게 좋은 기반을 제공해야하므로 미디어 쿼리를 추가하지 않았다.

출처

2014-09-23 18:58:45 Bioto

난 그냥 게시합니다 updated version of the JSFiddle

는 기본적으로 나는 float :left|right을 제거하고 난 당신이 개 발표가 실제로 인라인 블록 역할을되도록 CSS display: inline-block을 추가했습니다. 텍스트 맞춤 : 가운데를 선택하면 블록이 자동으로 화면 가운데에 배치됩니다. 그들 사이의 공간을 늘리려면 여유를 좀주세요.

출처

2014-09-23 18:58:48

두 div를 균등하게 정렬하는 방법

답변

관련 문제