CSS를 사용하여 두 개의 div 블록을 수평으로 정렬하려면 어떻게 해야 합니까?

두 개의 Div 블록을 가로로 배치

CSS 및 HTML 기술을 활용하여 두 개의 Div 블록을 동일한 가로선에 정렬합니다.

해결책:

CSS:

<code class="css">#block_container {
    text-align: center;
}
#bloc1, #bloc2 {
    display: inline;
}</code>

이 CSS에서는 다음을 수행합니다.

• 상위 항목을 중앙에 배치 text-align: center를 사용하여 컨테이너(#block_container)를 사용하여 두 div 블록을 가로로 정렬합니다.
• 두 div 블록(#bloc1 및 #bloc2)의 표시 속성을 인라인으로 설정하여 동일한 줄에 표시되도록 합니다.

HTML:

<code class="html"><div id="block_container">
    <div id="bloc1"><?php echo " version " . $version . " Copyright &copy; All Rights Reserved."; ?></div>  
    <div id="bloc2"><img src="..."></div>
</div></code>

설명:

1. #block_container div는 두 div 블록의 상위 컨테이너입니다.
2. #block_container의 text-align 속성은 #bloc1 및 #bloc2를 모두 포함하여 콘텐츠를 중앙에 배치합니다.
3. #에 대해 표시 속성을 인라인으로 설정합니다. bloc1 및 #bloc2는 동일한 가로줄에 표시됩니다.

추가 참고 사항:

• 콘텐츠 배치에 적절한 HTML 태그를 사용하는 대신
  s에 원시 콘텐츠를 배치합니다. 텍스트의 경우

  또는 등을 사용할 수 있습니다.

• 이 솔루션의 데모는 jsFiddle에서 찾을 수 있습니다.

위 내용은 CSS를 사용하여 두 개의 div 블록을 수평으로 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!