HTML과 CSS에서 대체 div를 설정하는 방법은 무엇입니까?




(4)

당신은 position: absolute; 를 제거해야합니다 position: absolute; 오른쪽 열 항목에. 그런 다음 leftmargin-left: 200px; margin-top: 100px;

세로로 번갈아 이미지 갤러리가있는 웹 사이트를 설정하고 있습니다.

요약하면, 내가 시도한 것은 하드 코딩 된 너비를 div (실제 웹 사이트의 이미지)로 설정 한 다음 위치를 사용하여 div의 오른쪽 열을 배치합니다. 그런 다음 오른쪽 열의 div 높이 다음에 왼쪽 열에 있어야하는 세 번째 div를 추가했습니다.

.large-container {
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
}
.small-container {
  width: 150px;
  height: 50px;
  background-color: red;
  position:absolute;
  top: 100px;
  left: 200px;
  
}
<div style="position:relative;">
  <div class="large-container">
    This is an outer container
  </div>
  <div class="small-container">
    This has been the small one
  </div>
  <div class="large-container">
    This is an outer container
  </div>
</div>

의도 된 결과는 다음과 같습니다. intended-outcome 현재 결과는 다음과 같습니다. 현재 결과 왼쪽 열의 두 번째 div는 첫 번째 div 바로 아래에 있습니다. 오른쪽 div 높이 뒤에 앉기를 원합니다.


이것은 "위치"를 사용하지 않고 CSS 그리드 사용을 시작하는 것이 좋습니다. 이것은 2 개의 열과 3 개의 행으로 그리드를 정의하여 쉽게 수행 할 수 있습니다. 그런 다음 원하는대로 요소를 내려 놓습니다. 다음 예제를 살펴보십시오.

.container {
  display: grid;
  grid-template-columns: 200px 150px;
  grid-template-rows: 100px 50px 100px;
}

.large-container {
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
}

.small-container {
  width: 150px;
  height: 50px;
  background-color: red;
}

.item2 {
  grid-row: 2;
  grid-column: 2;
}

.item3 {
  grid-row: 3;
  grid-column: 1;
}
<div class="container">
  <div class="large-container item1"></div>
  <div class="small-container item2"></div>
  <div class=" large-container item3"></div>
</div>


.small-container 에서 margin-left: 200px;margin-left: 200px; 변경해 보셨습니까 margin-left: 200px;


css grid 사용할 수 있습니다. 그러면 더 동적으로 만들어져 원하는 컨테이너를 추가하게됩니다.

.grid {
  display: inline-grid;
  grid-template-areas: "l1 ." ". s1" "l2 .";
}

.large-container {
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
}

.small-container {
  width: 150px;
  height: 50px;
  background-color: red;
  top: 100px;
  left: 200px;
}

.l1 {
  grid-area: l1;
}

.l2 {
  grid-area: l2;
}

.s1 {
  grid-area: s1;
}
<div class="grid">
  <div class="large-container l1">
    This is an outer container
  </div>
  <div class="small-container s1">
    This has been the small one
  </div>
  <div class="large-container l2">
    This is an outer container
  </div>
</div>

CSS 그리드에 대한 자세한 정보는 here







css