Question

我有三个div，即使经过数小时的研究，也无法按照我想要的方式定位。我正在使用bootstrap行和列。

没有一个类具有设定的高度。

Answer 1

你需要将屏幕分成两部分（6：6或7：5）然后在其中嵌入另一个元素

.d1 {
    height: 100px;
    background: orange;
}
.d2 {
    height: 200px;
    background: lightgreen;
}
.d3 {
    height: 100px;
    background: gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
      <div class="col-xs-7">
        <div class="row">
          <div class="col-xs-12 d1"></div>
          <div class="col-xs-12 d3"></div>
        </div>
      </div>
      <div class="col-xs-5">
        <div class="row">
          <div class="col-xs-12 d2"></div>
        </div>
      </div>
    </div>
</div>

Answer 2

需要将A和C放在相同的col-xs-6中。

window.App = new Vue({
   el: '#app',
   methods: {
     live: function (event) {
       this.$emit('liveClick', 'msg')
     }
   }
})

Answer 3

试试这段代码。

HTML代码

<table class="container">
  <tr>
    <td class="right">
      <div class="top">
        <div class="block"></div>
      </div>
      <div class="bottom">
        <div class="filler"></div>
        <div class="block"></div>
      </div>
    </td>
    <td class="left">
    </td>
  </tr>
</table>

CSS代码

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.left {
  border: 1px solid #080808;
  width: 50%;
  height: 200px;
}

.right {
  height: 100%;
  width: 50%;
  padding-right: 3px;
}

.right .top {
  border: 1px solid #080808;
  height: 49%;
  width: 100%;
  vertical-align: top;
  margin-bottom: 3px;
}

.right .bottom {
  border: 1px solid #080808;
  height: 49%;
  width: 100%;
  vertical-align: bottom;
}

.block {
  width: 50px;
  height: 50px;
  display: inline-block;
}

.filler {
  height: 100%;
  background: red;
  display: inline-block;
}

小提琴链接

Click here

Bootstrap面板定位

3 个答案: