如何动态地围绕div定位元素？

Question

我创建了一个用于切换div位置的按钮 - 它工作正常 - 但我不想为右侧，顶部，底部和左侧属性设置特定值...我希望它们能够以某种方式对齐他们的相对div，比如浮动...

所以这里 - 所有这些属性都不应该......我认为方向是使用Flexbox ....但是我并不是太强大了......

<h1 v-if="ok">Yes</h1>
<h1 v-show="ok">Yes</h1>

.top {
  top: -50px; 
}

.bottom {
  bottom: -50px;
}

.left {
  left: -200px;
}

.right {
  right: 260px;
}

$('select').on('change', function() {

  var labels = $('.labels');
  $(labels).attr('class', 'labels');
  $(labels).addClass($(this).val());

})

.row {
  position: relative;
  margin-top: 100px;
}

.labels {
  position: absolute;
  width: 200px;
  height: 50px;
  background-color: aqua;
}

.top {
  top: -50px;
}

.bottom {
  bottom: -50px;
}

.left {
  left: -200px;
}

.right {
  right: 260px;
}

.tabs-cont {
  width: 500px;
  height: 200px;
  background-color: orange;
}

Answer 1

得到它

＆＃13;

＆＃13;

$('select').on('change', function(){

var labels = $('.labels');
var container = $('.tabs-wrapper');
var this_val = $(this).val();
console.log(this_val);
if(this_val =='top' || this_val =='bottom' ){
 
 $('.tabs-wrapper').attr('class', 'tabs-wrapper');
 $('.tabs-wrapper').addClass('display-column-mode');
}

if(this_val =='right' || this_val =='left' ){
 
 $('.tabs-wrapper').attr('class', 'tabs-wrapper');
 $('.tabs-wrapper').addClass('display-row-mode');
}

$(labels).attr('class', 'labels');
$(labels).addClass($(this).val());

})

＆＃13;

.tabs-wrapper {
  width: 800px;
  border: solid 1px #000;
  display: flex;
  padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.display-column-mode {
  flex-direction: column;
}

.display-row-mode {
  flex-direction: row;
}

.row {
  position: relative;
  margin-top: 100px;
}

.labels {
  width: 200px;
  height: 50px;
  background-color: aqua;
}

.top {
  width: 100%;
  border: solid 1px #000;
  margin-top: auto;
  
}

.bottom {
  width: 100%;
  border: solid 1px #000;
  margin-bottom: auto;
  order: 2;
}

.left {
  
  border: solid 1px #000;
  margin-left: auto;
  
}

.right {
 
  border: solid 1px #000;
  margin-right: auto;
  order: 2;
}

.tabs-cont {
  width: 100%;
  height: 200px;
  background-color: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <select>
  <option >select</option>
<option value="top">top</option>
<option value="bottom">bottom</option>
<option value="left">left</option>
<option value="right">right</option>
</select>
</div>
<div class="tabs-wrapper">

  <div class="labels">
    labels
  </div>

  <div class="tabs-cont">
    tabs cont
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;