html - CSS 挑战 : Using two div and contenteditable div to Create a 凸 shape

Question

我想创建类似图片的东西，#body 位于#leg1 和#leg2 之间，其中三个应该水平对齐到底部。知道如何实现这一目标吗？我调整了一些属性，例如 display:inline 或 float:left、float:right，但没有一个像我预期的那样工作。

.comment_leg {
  s width: 60px;
  /*height:18px;*/
  background-color: #ffcc99;
  padding: 5px;
  text-align: center;
  border-radius: 3px;
}
[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  For Firefox
}
#body {
  background-color: white;
  /*position:relative;*/
  border: 1px solid orange;
  /*height:60px;*/
  width: 500px;
  padding: 10px;
  color: black;
  border-radius: 3px;
  font-size: 18px;
  /*border-color:yellow;*/
}
#body:focus {
  outline-style: solid;
  outline-color: orange;
  outline-width: 0px;
}

<br>
<br>
<br>
<div class="comment_leg">leg1</div>
<div id="body" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Pika pi?"></div>
<div class="comment_leg">leg2</div>

Answer 1

根据我对你的“凸”形的理解，我想这就是你想要的:

注意:您可以根据自己的喜好调整高度和宽度。

.comment_leg {
  width: 60px;
  /*height:18px;*/
  background-color: #ffcc99;
  padding: 5px;
  text-align: center;
  border-radius: 3px;

  vertical-align: bottom;
  display: inline-block;
}
[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  For Firefox
}
#body {
  background-color: white;
  border: 1px solid orange;
  min-height:100px;
  width: 150px;
  padding: 10px;
  color: black;
  border-radius: 3px;
  font-size: 18px;

  display: inline-block;
  vertical-align: bottom;
}
#body:focus {
  outline-style: solid;
  outline-color: orange;
  outline-width: 0px;
}

<div class="comment_leg">leg1</div>
<div id="body" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Pika pi?"></div>
<div class="comment_leg">leg2</div>