[css] 스팬 또는 div를 가로로 정렬하려면 어떻게합니까?

Program / 글쓴이

내 유일한 문제는 그것들이 세 줄로 정렬되고 동일한 간격을 갖도록 만드는 것입니다. 분명히 스팬은 너비를 가질 수 없으며 div (및 display : block이있는 스팬)는 서로 옆에 가로로 나타나지 않습니다. 제안?

<div style='width:30%; text-align:center; float:left; clear:both;'> 내가 지금 가지고있는 것입니다.

답변

float: left;서로 옆에 가로로 표시되는 속성 과 함께 div를 사용할 수 있지만 다음 요소가 겹치지 않도록하려면 다음 요소를 지워야합니다.

답변

당신이 사용할 수있는

.floatybox {
     display: inline-block;
     width: 123px;
}

인라인 블록을 지원하는 브라우저 만 지원해야하는 경우. 인라인 블록은 너비를 가질 수 있지만 버튼 요소처럼 인라인입니다.

아, 그리고 당신은 수직 정렬을 추가 할 수 있습니다.

답변

내 대답 :

<style>
 #whatever div {
  display: inline;
  margin: 0 1em 0 1em;
  width: 30%;
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

왜?

기술적으로 Span은 인라인 요소이지만 너비를 가질 수 있으며 먼저 차단하도록 표시 속성을 설정하기 만하면됩니다. 그러나이 컨텍스트에서는 이러한 div를 콘텐츠로 채우고 싶기 때문에 div가 더 적절할 것입니다.

확실히하고 싶지 않은 한 가지는 clear:bothdiv에 설정 한 것입니다. 이렇게 설정하면 브라우저가 요소와 같은 줄에 놓이는 요소를 허용하지 않습니다. 결과적으로 요소가 쌓입니다.

의 사용을합니다 display:inline. 이것은 ie6 margin-doubling 버그를 다룹니다. 필요한 경우 조건부 스타일 시트와 같은 다른 방법으로이 문제를 해결할 수 있습니다.

페이지의 유일한 요소가 아니라고 생각하므로 래퍼 (#whatever)를 추가했습니다. 따라서 거의 확실하게 다른 페이지 요소와 분리해야합니다.

어쨌든 도움이 되었기를 바랍니다.

답변

넌 할 수있어: 

<div style="float: left;"></div>

또는 

<div style="display: inline;"></div>

둘 중 하나는 div가 가로로 바둑판 식으로 배열되도록합니다.

답변

나는 3 개의 균등 한 크기의 열, 심지어 간격과 (균등 한) 스케일을 제공하므로 이와 같이 할 것입니다. 참고 : 이것은 테스트되지 않았으므로 이전 브라우저에 대해 조정이 필요할 수 있습니다.

<style>
html, body {
    margin: 0;
    padding: 0;
}

.content {
    float: left;
    width: 30%;
    border:none;
}

.rightcontent {
    float: right;
    width: 30%;
    border:none
}

.hspacer {
    width:5%;
    float:left;
}

.clear {
    clear:both;
}
</style>

<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>

답변

다음을 사용합니다.

<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%;
}
.sidebox {
float: right;
width: 30%;
}
<div class="all">
   <div class="maincontent">
       MainContent
   </div>
   <div class="sidebox">
       SideboxContent
   </div>
</div>

오버플로에서이 ‘코드 도구’를 처음 사용했지만 지금까지해야합니다 …

답변

원하는 것은 CSS 그리드 기반 레이아웃을 찾는 것입니다. 이 레이아웃 방법에는 페이지 내용을 그리드 구조에 맞추기 위해 일부 CSS 클래스를 지정하는 작업이 포함됩니다. 웹 기반보다 인쇄 기반 레이아웃과 더 밀접한 관련이 있지만 많은 웹 사이트에서 테이블에 의존하지 않고 콘텐츠를 구조로 레이아웃하는 데 사용되는 기술입니다.

스매싱 매거진의 초보자 를 위해 이것을 시도하십시오 .