Question

请不要使用JavaScript。

请想象一下。一个页面有数百个框，每个框包含一个笑话，引用，图像...（所有带有display：inline-block;的框）。

现在，我正在尝试放置一个带有一些带有position：absolute;组件的图表。左：在display：inline-block之一中；盒没有运气。该图表显示在页面的左侧，并在其下方提供了一个下一个笑话框。

我如何控制它？

全部加油

第2部分（我的方框代码）：

.boxDarth{
    border-radius:5px;
    border:1px solid #663810;
    box-shadow:-3px 5px 4px #000000;
    margin:6px 3px;
    padding:6px;
    display:inline-block;

    line-height:1.5;
    text-align:left;
    text-decoration:none;
    font-weight:lighter;
    letter-spacing:1.4;
    text-shadow:-1px 1px 1px #37363b;
    word-wrap:break-word;

    vertical-align:top;
    position:relative;
}

图表ccs很长。如果我在这里提供的内容还不够，并且因为我从没有在这里问过问题，我应该在这里粘贴吗？上传文件？

.pie{
    position:absolute;
    width:100px;
    height:200px;
    overflow:hidden;
    left:150px;
    -moz-transform-origin:left center;
    -o-transform-origin:left center;
    -webkit-transform-origin:left center;
    transform-origin:left center;
}

Answer 1

图表必须是串联阻止框的子级，并且该框上必须带有position: relative;。

.inline-box {
  display: inline-block;
  background: violet;
  width: 300px;
  height: 300px;
  position: relative;
}

.chart {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 150px;
  background: cornsilk;
}

<div class="inline-box">
  <div class="chart">
    hi, I'm an absolutely positioned chart inside of a relatively positioned inline box
  </div>
</div>

Answer 2

容器应具有position: relative作为CSS属性

如何用position：absolute;创建CSS3图表在具有display：inline-block;的框内工作；

2 个答案: