CSS의 행과 열 구성

두 행에 3 개의 열이 있지만 두 번째 행의 처음 두 열이 아래로 밀리고 있습니다. 왜??? :)CSS의 행과 열 구성

가 여기 내 바이올린은 그냥 "뉴욕"http://jsfiddle.net/q9cfa6qu/13/

/* accordion header */ 
.accordion h2 { 
    background:#A91414; 
    width:250px; 
    font-size:18px; 
    font-weight:bold; 
    cursor:pointer; 
    color: #fff; 
    margin:15px; 
    text-align:center; 
    text-transform:uppercase; 
    float:left;padding:9px 50px 9px 50px; 
    } 

/* accordion header */ 
.accordion2 h2 { 
    background:#000; 
} 

/* currently active header */ 
.accordion h2.current { 
    cursor:default; 
    background-color:#B40404; 

} 
/* currently active header */ 
.accordion2 h2.current { 
    cursor:default; 
    background-color:#000; 
} 
/* accordion pane */ 
.accordion .pane { 
    display:none; 
    padding:15px; 
    color:#fff; 
    font-size:16px; 
    float:left; 
    width:99%; 
}

출처

2014-10-29 omar

질문이 명확하지 않습니다. Stop & Shop 및 Shop Rite의 이미지가 WholeFood의 주소 아래에있는 이유는 무엇입니까? –

보기 http://screencast.com/t/3JGeTqx1cj 두 번째 행이 첫 번째 행과 어떻게 정렬되지 않았는지 확인하십시오. jfiddle에서는 열을 상태를보고 문제를보기 위해 화면을 실제로 확장해야합니다. – omar

클릭 부모 가게 H2 버튼의 높이

<h2>Kitchen Kabaret 
    409 Glen Cove Rd. 
    Roslyn Heights, NY</h2>

collidates 귀하의 H2 버튼입니다! 상점 1과 2를 보면, 그것들은 세 번째보다 더 높습니다 (단어 :)?). .accordion h2의 15 픽셀 여백을 사용하면 하위 h2가 세 번째 위치로 이동 한 후 다음 행에서 계속됩니다. 문제를 해결하려면 이미지가있는 상점 단추를 고정 높이로 설정해야합니다. 아마 그들을 위해 별도의 수업을 제공해야합니다. 그러면 국가 h2 버튼에 영향을 미치지 않도록 할 수 있습니다.

출처

2014-10-29 22:26:53

스크린 샷을보세요. 여기서 Whole Food 버튼 바로 아래에 직사각형을 그려 보았습니다. 그러면 자식 버튼에 총 30px 크기의 공간을 사용할 수 없음을 알 수 있습니다. –

저는 이것을 생각하고 있었지만 실제로는하지 않았습니다. 나는 단지 볼 수있는 피들의 모든 이미지에 너비 = 100 및 높이 = 100을 넣었고 효과가있었습니다. 고맙습니다!!! – omar

CSS의 행과 열 구성

답변

관련 문제