如何将一个子 div 与另一个子 div 内联？答案

【问题标题】：How to inline a child div with another child div?如何将一个子 div 与另一个子 div 内联？
【发布时间】：2017-07-10 20:52:56
【问题描述】：

我试过浮动，显示内联块。 Flex 确实有效，但我不能使用 flex，因为它会内联每个子 div，我不希望这样。我基本上想要左边的几个盒子和右边的一个盒子，它们会根据左边的子 div 的高度大小自动调整高度。我已经尝试将 boxChildRight 浮动到右/左反之亦然，但它不起作用。

HTML

#sp {
  position: absolute;
  left: 400px;
  top: 0;
}

#box {
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.boxChildRight {
  right: 0;
  width: 20%;
  height: auto;
  border: 1px solid;
  position: relative;
  float: right;
}

.boxChildLeft {
  left: 0;
  width: 80%;
  height: 100px;
  border: 1px solid;
  margin-bottom: 2px;
  position: relative;
  float: left;
}

.prodInfo {
  float: left;
  margin-left: 10px;
}

.img {
  margin-left: 0;
  float: left;
}

<div id="box"> PARENT DIV
  <div class="boxChildLeft"> CHILD
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildLeft">
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildLeft">
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildLeft">
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildRight"> THIS CHILD DIV SHOULD BE ON RIGHT SIDE OF ALL OTHER DIVS
  </div>
</div>

【问题讨论】：

您能否提供您希望它看起来如何的图形表示...或解释更多... :)
如果您单击运行代码，您将看到它的外观。我希望右下角的子框位于第一个 div 的顶部到最后一个 div 的底部。

标签： html css

【解决方案1】：

你可以使用position:absolute;

*{
  box-sizing:border-box; /* Added */
}

#sp {
  position: absolute;
  left: 400px;
  top: 0;
}

#box {
  width: 100%;
  height: auto;
  margin-top: 20px;
  position:relative; /* Added */
  padding-right:20%; /* Added */
  float:left; /* Added */
}

.boxChildRight {
  width: 20%;
  height: 100%; /* Updated */
  border: 1px solid;
  position:absolute; /* Added */
  right:0; /* Added */
  top:0; /* Added */
}

.boxChildLeft {
  left: 0;
  width: 80%;
  height: 100px;
  border: 1px solid;
  margin-bottom: 2px;
  position: relative;
  float: left;
}

.prodInfo {
  float: left;
  margin-left: 10px;
}

.img {
  margin-left: 0;
  float: left;
}

<div id="box"> PARENT DIV
  <div class="boxChildLeft"> CHILD
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildLeft">
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildLeft">
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildLeft">
    <div class="img">
      <img src="../shopImages/candles.jpg" width="100px" height="100px">
    </div>
    <div class="prodInfo">
      <p1>Test</p1><br>
      <span id="sp"><p1>Test</p1></span>
    </div>
  </div>
  <div class="boxChildRight"> THIS CHILD DIV SHOULD BE ON RIGHT SIDE OF ALL OTHER DIVS
  </div>
</div>

更新您的评论

盒子大小

在 CSS 中，默认情况下，您分配给元素的宽度和高度是仅应用于元素的内容框。如果元素有任何边框或填充，然后将其添加到宽度和高度以到达屏幕上呈现的框的大小。这个意味着当您设置宽度和高度时，您必须调整值您给予允许可能添加的任何边框或填充。这是在实现响应式设计时尤其棘手。

MDN

【讨论】：

感谢工作:) 我以前从未见过这种类型的代码.. *{ box-sizing:border-box; / 添加 */ } 它实际上做了什么？
您可以阅读box-sizing here。

【解决方案2】：

您的问题是，尽管 divs 设置为 80% 和 20% - 这不包括边框。

为了在为您的元素计算的整体width 中包含边框宽度，只需添加：

* {
  box-sizing: border-box;
}

为您的 CSS。这样，每个元素在计算元素的width时都会考虑border属性。

【讨论】：

谢谢，这绝对是问题的一部分。什么是星 * ？我以前从未见过这种类型的 css 代码
* 表示使用最低特异性的“一切”。所有 UI 框架都使用此属性（如 Bootstrap / Material 等）。

【解决方案3】：

我认为使用位置不是一个好的解决方案，我们可以不使用绝对位置。同意* { box-sizing: border-box; }

这段代码没有使用位置绝对属性：-

https://jsfiddle.net/oceh7f9q/

【讨论】：