2016-10-18 3 views
0

CSS3와 HTML5를 Sublime과 함께 사용하고 있는데 div의 내부에 세 개의 요소를 완벽하게 정렬하려고합니다.하지만 그 방법을 모르겠습니다. 요소는 두 번째 div에 있으며 버튼과 두 개의 이미지입니다.div에서 CSS를 정렬하는 CSS CSS

h1 { 
 
    margin-left: 510px; 
 
} 
 
div { 
 
    column-count: 2; 
 
    padding-left: 50px padding-right: 50px; 
 
} 
 
button { 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 70px; 
 
    margin-left: 50px; 
 
    margin-top: 50px; 
 
} 
 
/* 
 
    div img { 
 
     margin-left: 735px; 
 
     width:304px; 
 
     height:228px; 
 
     visibility:hidden; 
 
    } */ 
 

 
#myImageId { 
 
    margin-left: 35px; 
 
    width: 304px; 
 
    height: 228px; 
 
    visibility: visible; 
 
} 
 
#myImageId2 { 
 
    margin-left: 35px; 
 
    width: 304px; 
 
    height: 228px; 
 
    visibility: visible; 
 
}
\t <h1>Lorem Ipsum</h1> 
 
<br> 
 
<div> 
 
    <h3>Cos’è Lorem Ipsum?</h3> 
 
    Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare 
 
    un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, 
 
    che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum. 
 
    <br> 
 
    <h3>Perchè lo utilizziamo?</h3> 
 
    È universalmente riconosciuto che un lettore che osserva il layout di una pagina viene distratto dal contenuto testuale se questo è leggibile. Lo scopo dell’utilizzo del Lorem Ipsum è che offre una normale distribuzione delle lettere (al contrario di 
 
    quanto avviene se si utilizzano brevi frasi ripetute, ad esempio “testo qui”), apparendo come un normale blocco di testo leggibile. Molti software di impaginazione e di web design utilizzano Lorem Ipsum come testo modello. Molte versioni del testo sono 
 
    state prodotte negli anni, a volte casualmente, a volte di proposito (ad esempio inserendo passaggi ironici). 
 
</div> 
 
<br> 
 
<div> 
 
    <button type="button" onclick="showImage()">Show/Hide image!</button> 
 
    <img src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" alt="Lorem" id="myImageId"> 
 
    <img src="http://www.metal-archives.com/images/1/5/5/0/15500_logo.jpg" alt="Lorem2" id="myImageId2"> 
 

 
</div>

+0

"완벽하게 세 요소 정렬"이란 무엇을 의미합니까? 정확한 너비로 수평을 의미합니까? – Kossel

+0

#kossel 예. 각 요소를 같은 거리만큼 수평으로 정렬합니다. –

답변

1

나는 디스플레이와 함께 당신이 그것을 고칠 수 플렉스 생각합니다. 컨테이너에

display: flex; 

추가

, 그 내부의 항목은 완벽하게 컨테이너를 맞는 것입니다.

나는 http://caniuse.com/#search=flex

의 호환성을 참조하는 것이 좋습니다 숀 Fioritto에 의해이 문서 확인

여기 당신이 생성하는 것이 좋습니다 인 flexbox이 http://codepen.io/buenopw/pen/qaJYWN

0

귀하의 경우에 작동하는 방법의 예 내 codepen입니다 컨테이너 또는 래퍼 클래스, 특히 div, h1 태그의 속성을 편집하는 대신 전체 페이지에서 매우 일반적입니다. 당신이 그들을 페이지의 폭하는 경우, 그 아이 요소를 고정하지 말았어야 크기에 맞게하려면

https://plnkr.co/edit/ShRKKsPHd8vcBTqW25L1?p=preview

살펴 보시기 바랍니다.

관련 문제