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

내 유일한 문제는 그것들이 세 줄로 정렬되고 동일한 간격을 갖도록 만드는 것입니다. 분명히 스팬은 너비를 가질 수 없으며 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 클래스를 지정하는 작업이 포함됩니다. 웹 기반보다 인쇄 기반 레이아웃과 더 밀접한 관련이 있지만 많은 웹 사이트에서 테이블에 의존하지 않고 콘텐츠를 구조로 레이아웃하는 데 사용되는 기술입니다.

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

css Float 속성을 살펴보십시오. http://w3schools.com/css/pr_class_float.asp

div와 같은 블록 요소와 함께 작동합니다. 또는 표시하려는 내용은 실제로 일부 정보의 표를 표시하려는 경우 표가 나쁘지 않습니다.

나는 그들에게 모든 display: block;속성 을 부여하고 float: left;.

그런 다음 원하는대로 설정 width하거나 설정할 수 있습니다 height. 수직 정렬 규칙을 지정할 수도 있습니다.

    <!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>

또 다른 ... float: left;또는 right;, width다른 값으로 변경하십시오 ... 그것은 일할 것입니다 ... 또한 div가 사용하지 않는 10 %는 그들 사이에 ...