相鄰div的孩子需要垂直水平-有解無憂

div如圖所示，共有 3 個 Vertical 。每個內部都有一些子divs div，用藍色矩形表示。我需要孩子們div垂直水平。我該怎么做？相鄰 div 的孩子需要垂直水平

uj5u.com熱心網友回復：

正如他們所說，如果它們在單獨的容器中，那么純 css/html 是不可能的。使用 javascript，您可以首先創建 'base' 元素（在這種情況下，中心列的內部 div），保存其坐標，然后創建側面元素并使用保存的坐標定位它們。

這是一個粗略的例子，但可以給出想法

for (let i = 1; i < 10; i  ) {
  //Create the center column element first, from where to get the Y pos
  let elem2 = document.createElement('div');
  elem2.style.width = 'calc(100% - 10px)';
  elem2.style.height = '50px';
  elem2.style.margin = '5px';
  elem2.style.background = 'lightblue';
  document.querySelector('.col2').append(elem2);

  let coords = elem2.getBoundingClientRect(); //Getting coords data

  //creating first column elem
  let elem1 = document.createElement('div');
  elem1.style.position = 'absolute';
  elem1.style.top = coords.top   'px'; //use de y pos from above
  elem1.style.width = 'calc(100% - 10px)';
  elem1.style.height = '25px';
  elem1.style.margin = '0 5px';
  elem1.style.background = 'pink';
  document.querySelector('.col1').append(elem1);

  //creating third column elem
  let elem3 = document.createElement('div');
  elem3.style.position = 'absolute';
  elem3.style.top = coords.top   'px'; //use de y pos from above
  elem3.style.width = 'calc(100% - 10px)';
  elem3.style.height = '25px';
  elem3.style.margin = '0 5px';
  elem3.style.background = 'lightgreen';
  document.querySelector('.col3').append(elem3);
}

body,
html {
  margin: 0;
  padding: 0;
  background: lightyellow
}

.container {
  display: flex;
}

.col1 {
  position: relative;
  width: 75px;
  border: 2px solid red
}

.col2 {
  position: relative;
  flex-grow: 1;
  border: 2px solid blue
}

.col3 {
  position: relative;
  width: 150px;
  border: 2px solid green
}

<div class="container">
  <div class="col1">
  </div>

  <div class="col2">
  </div>

  <div class="col3">
  </div>

</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/443705.html

標籤：javascript html css

上一篇：html/css列都改變大小，但我只想要一個

下一篇：js點擊事件處理，比如計數器