鍍金池/ 問答/HTML/ 1.請問怎么做可以讓一個(gè)div的寬度變化是從左到右。2，動(dòng)態(tài)拖來，編輯多級表頭

1.請問怎么做可以讓一個(gè)div的寬度變化是從左到右。2，動(dòng)態(tài)拖來，編輯多級表頭

就是div的右邊寬位置固定，拉動(dòng)左邊框，寬從左邊向右縮小

clipboard.png

例如我有兩個(gè)div1,div2. div2在div1里面居中?，F(xiàn)在我拉動(dòng)div2的左邊框，寬度縮小，是從左到右縮，右邊框的位置不變

我現(xiàn)在做一個(gè)動(dòng)態(tài)拖來，編輯多級表頭，請問思路怎么破，或者可以推薦一個(gè)動(dòng)態(tài)拖來，編輯多級表頭插件，現(xiàn)在這個(gè)圖片的表格不是用table來做的，用div做出來只是做編輯預(yù)覽的，有個(gè)大概的樣子，然后把數(shù)據(jù)傳到后臺(tái)，按照這個(gè)樣子渲染

clipboard.png

clipboard.png

回答
編輯回答
茍活

你說的這種方式應(yīng)該是右對齊的方式。
1、設(shè)置float:right;自然寬度變化的時(shí)候是右邊位置不變，左側(cè)延伸了；
2、定位 絕對定位或者固定定位；
3、flex布局，也有右對齊的設(shè)置，你可以參考http://www.ruanyifeng.com/blo...

2018年7月19日 22:42
編輯回答
柒喵

給div設(shè)置樣式position: absolute;right: 0; 給父元素設(shè)置position:relative

2017年2月6日 11:58
編輯回答
負(fù)我心

首先，每兩個(gè) div 中間放一個(gè) div，作為把手（handle），接受鼠標(biāo)事件。

然后，大概這樣（沒有查文檔，以下代碼為偽代碼，請自行適配你的基礎(chǔ)庫）：

handle.addEventListener('mousedown', event => {
  const startX = event.x;
  const leftWidth = left.width;
  const rightWidth = right.width;
  const _onMove = event => {
    left.width = leftWidth + event.x - startX;
    right.width = rightWidth - (event.x - startX);
  };
  const _onRelease = event => {
    window.removeEventListener('mouseup', _onRelease);
    window.removeEventListener('mousemove', _onMove);
  }
  window.addEventListener('mouseup', _onRelease, false); // 注意，這里一定是 window，因?yàn)橥蟿?dòng)過程中，可能會(huì)離開
  window.addEventListener('mousemove', _onMove, false); // handle，為保證事件生效，所以要綁在 window 上
});
2018年4月12日 09:32