Divs를 같은 라인에 만드십시오.

Question

이 아이콘 페이지를 만드는 데 어려움이 있습니다. 기본적으로, 나는 그것이 기본적으로이 같은 것입니다 ... 그래서 서로 가까이

사용자 정의 아이콘 - 연필 사용자 정의 아이콘을 정렬하는 아이콘을 원하는 - 시계 연필의 아이콘 시계의 아이콘을

<div> 
    <!-- Icon Button - pencil --> 
    Custom Icon - pencil <br /> 
    <div id="pencil">pencil</div> 
</div> 

<div> 
    <!-- Icon Button - clock --> 
    Custom Icon - clock <br /> 
    <div id="clock">clock</div> 
</div> 

<div> 
    <!-- Icon Button - disk --> 
    Custom Icon - disk <br /> 
    <div id="disk">disk</div> 
</div> 

<div> 
    <!-- Icon Button - calendar --> 
    Custom Icon - calendar <br /> 
    <div id="calendar">calendar</div> 
</div> 

<div> 
    <!-- Icon Button - zoomin --> 
    Custom Icon - zoomin <br /> 
    <div id="zoomin">zoomin</div> 
</div> 

<div> 
    <!-- Icon Button - zoomout --> 
    Custom Icon - zoomout <br /> 
    <div id="zoomout">zoomout</div> 
</div> 

나는 미리 만들어진 단추가 있습니다. 직원 용 페이지에 표시하고 싶습니다.

Answer 1

찾고있는 것을 정확하게 이해하는 데 어려움을 겪고 있지만 일반적인 지침을 줄 수는 있습니다. div가 있고 가로로 정렬하려는 경우 CSS를 구현하는 가장 일반적인 방법은 float입니다.

Here's a fiddle.

여기가 어떻게됩니까? 나는 3 div를 만들었고 서로 옆에 줄 지어있다. 나는 그들에게 두 가지 수업을 각각 주었다. 그들 모두는 클래스 icon을 가지며,이 세 가지 모두의 행동을 제어합니다. 그런 다음 각자는 자신의 행동을 정의하는 두 번째 클래스를 갖게됩니다. 또한 그 안에 div를 채울 수있는 방법을 보여주는 텍스트가 있습니다.

위로 줄 지어주는 중요한 점은 모두가 float: left이고 모두가 width입니다. 콘텐츠가 모두 특정 너비가 아닌 경우 너비를 설정하는 것이 레이아웃에서 중요 할 것입니다.이 경우 padding을 사용하면 행복 할 것입니다.

내가 완전히 귀하의 요점을 놓치고 있다면, 명확히하려고 노력하겠습니다.