Question

为某些文本构建一个包含程式化容器的叠加层，但是这个容器似乎产生了一个边距，当与元素正常宽度结合使用时会占用整个父元素宽度。根据chrome dev工具，它导致了.flipcontainer元素。

这是一种非常奇怪的行为，我无法弄清楚它为何会以这种方式行事。

例如，如果我想将内容放在容器的右侧，我将无法生成此边距。

＆＃13;

.flipcontainer {
  height: 230px;
  width: 150px;
}
.flipcalender {
  border: 1px solid #dddddd;
  border-radius: 25px;
  margin: 0 auto;
  margin-top: 0.2px;
  background: linear-gradient(white, #f4f2f2);
}
.mmouter {
  width: 100%;
  height: 100%;
  border: 1.5px solid #dddddd;
}
.mmmiddle {
  width: 98%;
  height: 98%;
}
.mminner {
  width: 98%;
  height: 98%;
  background: linear-gradient(white, #f4f2f2);
  position: relative;
}
.mmbreaker {
  width: 99%;
  background-color: white;
  height: 2px;
  position: absolute;
  z-index: 1;
  top: 115px;
}
#mmlightbox {
  display: block;
  width: 400px;
  height: auto;
  position: fixed;
  top: 30%;
  left: 40%;
  z-index: 999;
  background-color: white;
  padding: 10px 20px 10px 0px;
  /* margin-right: 239px; */
  margin-top: -100px;
  margin-left: -150px;
  border: solid 2px #f21c0a;
}

＆＃13;

<div id='mmlightbox'>
  <div class='flipcontainer'>
    <div class='flipcalender mmouter'>
      <div class='flipcalender mmmiddle'>
        <div class='flipcalender mminner'>
          <p class='daysremaining'></p>
          <p>days</p>
          <div class='mmbreaker'></div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

将float: right;添加到.flipcontainer css，如下所示：

.flipcontainer {
    height: 230px;
    width:150px;
    float: right;
}

Here is the JSFiddle demo

您看到的边距是因为您将宽度指定为“150px”。

Answer 2

添加float：left会删除它，您可以在其旁边添加内容

.flipcontainer {
    height: 230px;
    width:150px;
    float: left;
}

请参阅小提琴http://jsfiddle.net/epe3bfdw/

CSS子元素产生父级的全宽度

2 个答案: