Question

我试过浮动，显示内联块。 Flex确实有效，但我不能使用flex，因为它会内联每一个子div，我不想要那样。我基本上想要左边的几个方框和右边的一个方框，相应地自动调整高度，左边是子div的高度尺寸。我试过将boxChildRight浮动到左/右反面并且它不起作用。

HTML

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用position:absolute;

＆＃13;

*{
  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;
}

＆＃13;

<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>

＆＃13;

更新了您的评论

<强>框上浆

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

<强> MDN

Answer 2

您的问题是虽然div设置为80%和20% - 但不包括边框。

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

* {
  box-sizing: border-box;
}

为你的CSS。这样，在计算元素border时，每个元素都会以width属性为单位。

Answer 3

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

此代码不使用位置绝对属性： -

https://jsfiddle.net/oceh7f9q/

如何用另一个子div内联一个子div？

3 个答案: