Question

我试图将3个div放在与以下代码相同的行中。

我的CSS和HTML：

＆＃13;

DatePicker

＆＃13;

.row {
  display: table;
  width: 100%
}
.row > div {

  display: table-cell;
  height:30px; /*demo purposes */
}
#left-bar {
  width: 10%;
  background-color: #FF0000;
}
#middle-bar {
  width: 70%;
  background-color: #6600FF;
}
#right-bar {
  width: 20%;
  background-color: #99FF99;
}

＆＃13;

不知何故，中间栏（我的画布）的内容位于正确的位置，但其他两个div内容位于页面底部，您可以在此处看到see photo。你们知道为什么会这样吗？

Answer 1

在评论和聊天中与您进一步讨论项目之后，我认为您应该采用使用flexbox的方法。代码非常简单：

.container {
    display: flex;
}

.left   { flex-basis: 10%; background: #F99; }
.right  { flex-basis: 20%; background: #99F; }
.middle { flex-basis: 70%; background: #9F9; }

<div class="container">
    <div class="left">L</div>
    <div class="middle">C</div>
    <div class="right">R</div>
</div>

Answer 2

我只管理宽度。没有问题可以看到这一点。

＆＃13;

.row {
  display: table;
  width: 100%
}
.row > div {

  display: table-cell;
  height:30px; /*demo purposes */
}
#left-bar {
  width: 20%;
  background-color: #FF0000;
}
#middle-bar {
  width: 60%;
  background-color: #6600FF;
}
#right-bar {
  width: 20%;
  background-color: #99FF99;
}

＆＃13;

<div class="row">
  <div id="left-bar"> here I have an accordion </div>
  <div id="middle-bar"> heve a have my canvas </div>
  <div id="right-bar"> and here I have an editor</div>
</div>

＆＃13;

Div内容位置错误

2 个答案: