html - 如何将一个子div与另一个子div内联？

我试过浮动，显示行内块。 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>

最佳答案

您可以使用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