div 内容的混合内联和块定位答案

【问题标题】：Mixed inline and block positioning of div contentdiv 内容的混合内联和块定位
【发布时间】：2018-08-29 18:12:11
【问题描述】：

我想通过应用 css 样式来实现内容的组合：

我应用我的风格，我得到了结果：

li {
  position: relative;
  list-style-type: none;
  border: 1px;
  border-color: red;
  border-style: solid;
}
div {
  border: 1px;
  border-color: green;
  border-style: solid;
}

div .xx {
  display: inline;
  width:100%;
} 

div .aa {
  position: absolute;
  dislay: inline;
  left: 0;
  width:50%;
}
div .bb {
  position: absolute;
  display: inline;
  right: 0;
  width:50%;
}
div .cc {
  postion: relative;
  display: block;
}

<li>
  <div class="xx">
      <div class="aa">A</div>
      <div class="bb">B</div>
    </div>
  <div class="cc">C</div>
</li>

所以“C”在“A”和“B”之下。任何人都可以帮我解决它吗？谢谢！

【问题讨论】：

删除所有绝对定位开始。你不需要它。
为什么我必须这样做？我将 A 和 B 移到了一行，但是我应该使用什么来将 B 的内容向右对齐？
learnlayout.com
codepen.io/Paulie-D/pen/VXpKeJ

标签： html css css-position css-content

【解决方案1】：

您可以使用display:flex; 使内部 div 的宽度均匀。

li {
  position: relative;
  list-style-type: none;
  border: 1px;
  border-color: red;
  border-style: solid;
}
div {
  border: 1px;
  border-color: green;
  border-style: solid;
}
.xx{
    display:flex;
}
div .aa {
 flex-basis: 100%
}
div .bb {
 flex-basis: 100%
}
div .cc {
  width:100%;
  display: block;
}

<li>
  <div class="xx">
      <div class="aa">A</div>
      <div class="bb">B</div>
    </div>
  <div class="cc">C</div>
</li>

【讨论】：