[css] CSS의 HTML colspan

다음과 유사한 레이아웃을 구성하려고합니다.

+---+---+---+
|   |   |   |
+---+---+---+
|           |
+-----------+

바닥이 위쪽 행의 공간을 채우고 있습니다.

이것이 실제 테이블 인 경우으로 쉽게이 작업을 수행 할 수 <td colspan="3">있지만 단순히 테이블과 같은 레이아웃을 만들 때 <table>태그를 사용할 수 없습니다 . CSS를 사용하여 가능합니까?

답변

에 대한 간단하고 우아한 CSS 아날로그는 없습니다 colspan.

이 문제에 대한 검색은 절대적인 위치 지정, 크기 조정 및 유사한 다양한 브라우저 및 상황 별 경고와 함께 다양한 대안을 포함하는 다양한 솔루션을 반환합니다. 찾은 내용에 따라 최선의 결정을 읽고 결정하십시오.

답변

내가 아는 한 CSS에는 colspan이 없지만 column-span가까운 장래에는 다중 열 레이아웃이 있지만 CSS3의 초안이므로 여기 에서 확인할 수 있습니다 . 어쨌든 당신은 사용하여 해결 방법을 수행 할 수 있습니다 div와 span같은 테이블 같은 디스플레이.

이것은 HTML입니다.

<div class="table">
  <div class="row">
    <span class="cell red first"></span>
    <span class="cell blue fill"></span>
    <span class="cell green last"></span>
  </div>
</div>
<div class="table">
  <div class="row">
    <span class="cell black"></span>
  </div>
</div>

그리고 이것은 CSS 일 것입니다 :

  /* this is to reproduce table-like structure
     for the sake of table-less layout. */
  .table { display:table; table-layout:fixed; width:100px; }
  .row { display:table-row; height:10px; }
  .cell { display:table-cell; }

  /* this is where the colspan tricks works. */
  span { width:100%; }

  /* below is for visual recognition test purposes only. */
  .red { background:red; }
  .blue { background:blue; }
  .green { background:green; }
  .black { background:black; }

  /* this is the benefit of using table display, it is able
     to set the width of it's child object to fill the rest of
     the parent width as in table */
  .first { width: 20px; }
  .last { width: 30px; }
  .fill { width: 100%; }

이 트릭을 사용하는 유일한 이유는 table-layout동작 의 이점을 얻는 것입니다 .div 및 스팬 너비를 특정 비율로 설정해도 디자인 요구 사항이 충족되지 않으면 많이 사용합니다.

그러나 table-layout행동의 혜택을 누릴 필요가 없다면 durilai의 대답 이 당신에게 충분할 것입니다.

답변

또 다른 제안은 테이블 대신 flexbox를 사용하는 것입니다. 이것은 물론 “현대 브라우저”이지만 2016 년입니다.)

적어도 이것은 원래 게시물이 2010 년부터 있었기 때문에 오늘날에 대한 답을 찾고있는 사람들에게는 대안적인 해결책 일 수 있습니다.

다음은 훌륭한 가이드입니다. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.table {
  border: 1px solid red;
  padding: 2px;
  max-width: 300px;
  display: flex;
  flex-flow: row wrap;
}
.table-cell {
  border: 1px solid blue;
  flex: 1 30%;
}
.colspan-3 {
  border: 1px solid green;
  flex: 1 100%;
}

<div class="table">
  <div class="table-cell">
    row 1 - cell 1
  </div>
  <div class="table-cell">
    row 1 - cell 2
  </div>
  <div class="table-cell">
    row 1 - cell 3
  </div>
  <div class="table-cell colspan-3">
    row 2 - cell 1 (spans 3 columns)
  </div>
</div>

스 니펫 확장

답변

<div style="width: 100%;">
    <div style="float: left; width: 33%;">Row 1 - Cell 1</div>
    <div style="float: left; width: 34%;">Row 1 - Cell 2</div>
    <div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>

답변

그것은 CSS의 범위의 일부가 아닙니다. colspan페이지 내용의 구조를 설명하거나 HTML 작업 인 표의 데이터에 의미를 부여합니다.

답변

최신 답변을 제공하려면 오늘이 작업을 수행하는 가장 좋은 방법은 다음과 같이 CSS 그리드 레이아웃을 사용하는 것입니다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "top-left top-middle top-right"
    "bottom bottom bottom"
}

.item-a {
  grid-area: top-left;
}
.item-b {
  grid-area: top-middle;
}
.item-c {
  grid-area: top-right;
}
.item-d {
  grid-area: bottom;
}

그리고 HTML

<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">123</div>

답변

http://960.gs/ 와 같은 그리드 시스템을 사용해보십시오.

“12 열”레이아웃을 사용한다고 가정하면 코드는 다음과 같습니다.

<div class="container_12">
<div class="grid_4">1</div><div class="grid_4">2</div><div class="grid_4">3</div>
<div class="clear"></div>
<div class="grid_12">123</div>
</div>