센터 정렬 단일 메인 DIV에서 여러 DIV가 겹쳐서 발행 됨

-2

한 줄로 여러 DIV를 차례로 인쇄하려고합니다. 또한 나는 페이지에 내용을 집중시킬 필요가있다. 플로트 스타일로 할 수 있지만 페이지 중심에 있지 않습니다. 나는 구글을 검색했다, 그것은 사용 디스플레이를 말한다 : 인라인 블록; float 대신에.센터 정렬 단일 메인 DIV에서 여러 DIV가 겹쳐서 발행 됨

여기 내가 시도했지만 두 div가 겹쳐 있습니다. 아웃 넣어

<div style="text-align:center"> 

    <div style="display: inline-block;"> 
    <a style="cursor:pointer;text-decoration:none;color:#000"> 
    <div style="display: inline-block;cursor:pointer;position:absolute;margin-left:0px;margin-top:-1px;margin-right:0px;"> 
    <img src="images/Calendar_blank.png" width="75" height="75"> 
    </div> 
    <div style="display: inline-block;position:absolute;margin-left:0px;margin-top:-1px;margin-right:0px;width:75px; font-family:Verdana, Geneva, sans-serif; font-size:16px;color:#030">Aug</div> 
    <div id="date1" style="display: inline-block;position:absolute; margin-left:0px;margin-top:27px;margin-right:0px;width:75px; "><strong>25</strong></div> 
    </a> 
    </div> 

    <div style="display: inline-block;"> 
    <a style="cursor:pointer;text-decoration:none;color:#000"> 
    <div style="display: inline-block;cursor:pointer;position:absolute;margin-left:0px;margin-top:-1px;margin-right:0px;width:75px; "> 
    <img src="images/Calendar_blank.png" width="75" height="75"> 
    </div> 
    <div style="display: inline-block;position:absolute;margin-left:0px;margin-top:-1px;margin-right:0px;width:75px; font-family:Verdana, Geneva, sans-serif; font-size:16px;color:#030">Aug</div> 
    <div id="date2" style="display: inline-block;position:absolute; margin-left:0px;margin-top:27px;margin-right:0px;width:75px; "><strong>25</strong></div> 
    </a> 
    </div> 

</div>

은 다음과 같습니다 예상

enter image description here

은 다음과 같습니다 콘텐츠는이 중복되면 안 페이지 &을 중심으로해야한다.

참고 : 하드 코드 된 마진을 스타일에 추가하고 싶지 않습니다. 확대/축소하는 동안 효과적이므로 &은 페이지 중심에 있지 않습니다.

출처

2014-07-25 logan

코드가 너무 복잡하여 쉽게 디버깅 할 수없는 인라인 스타일이 있습니다. 다음은 원하는 레이아웃을 가장 기본적으로 처음부터 다시 작성하는 방법입니다. position: absolute하면 확인 할 수 있습니다에 그 position: relative에 div를 자신의 자식 div의 설정, 또한 https://developer.mozilla.org/en-US/docs/Web/CSS/display#Values

의 핵심 구성 요소는 밝은 회색 달력 된 div에 display: inline-block을 추가하는 것은 그들이 나란히 앉을 수 있도록 포함 된 요소의 출처는 해당 상위 div 내에 있습니다.

인라인 스타일 (HTML에 지정된 스타일)은 절대 최소로 유지해야합니다. HTML (마크 업)은 주로 콘텐츠 용입니다. 스타일은 CSS에 포함되며, 비헤이비어는 일반적으로 JavaScript에 속합니다. 이렇게하면 코드를 읽고 업데이트 (디버그)하는 것이 훨씬 쉬워집니다.

HTML에서 별도의 CSS 파일을 링크 할 수도 있고 <style> 및 </style> 태그로 묶어서 HTML에 포함시킬 수도 있습니다.

DEMO : http://jsbin.com/lifij/1/

HTML :

<body> 

    <div id="container"> 

    <div class="calendar"> 
     <div class="stripe"> 
     <h3>Aug</h3> 
     </div> 
     <div class="number"> 
     <h1>25</h1> 
     </div> 
    </div> 

    <div class="calendar"> 
     <div class="stripe"> 
     <h3>Aug</h3> 
     </div> 
     <div class="number"> 
     <h1>25</h1> 
     </div> 
    </div> 

    </div> 

</body>

CSS :

h1, h3 { 
    font-family: sans-serif; 
    text-align: center; 
    margin: 0; 
} 

h3 { 
    font-weight: normal; 
} 

.calendar { 
    background-color: lightgray; 
    width: 80px; 
    height: 80px; 
    border-radius: 6px; 
    display: inline-block; 
    position: relative; 
} 

.stripe { 
    background-color: red; 
    width: 100%; 
    height: 24px; 
    border-radius: 6px 6px 0 0; 
    position: absolute; 
    top: 0; 
} 

.number { 
    position: absolute; 
    top: 30px; 
    width: 100%; 
}

출처

2014-07-26 00:33:43

센터 정렬 단일 메인 DIV에서 여러 DIV가 겹쳐서 발행 됨

답변

관련 문제