Question

我希望保持两个div并排，无论容器的宽度是多少都是固定的。这是我的示例html

<div class="container-fluid">
  <div class="row">
    <div class="item">
      <div class="date">
        <div class="month">APR</div>
        <div class="day">6</div>
        <div class="weekday">Mon</div>
      </div>
      <div class="details">
        <p>Kickstarter sustainable readymade Neutra viral, crucifix PBR. Migas tote bag art party, narwhal flannel hashtag YOLO XOXO polaroid. Ennui iPhone pour-over kitsch, lumbersexual stumptown gastropub flexitarian. </p>
      </div>
    </div>
  </div>
</div>

这是我的样本css

  .date{
    display: block;
    text-align: center;
    width: 4em;
    background-image: linear-gradient(#fff,#fff 1em,#e7e7e7);
    border-radius: 5px;
  }
  .month{
      background-color: blue;
      color: white;
      border-top-left-radius: 5px;
      border-top-right-radius:5px;
      padding: 2px 0 2px 0;
    }
  .day{
      font-size: 2em;
    }
  .details{
      width:100% - 5em;
      padding: 5px;
      border-radius: 6.5px;
      background-color: white;
      border: 1px solid rgb(204, 204, 204);
    }
    .item{
        border-radius: 6.5px;
        margin: 5px;
        padding: 5px;
        display: block;
        border: 0;
        background-color: rgba(0, 0, 0, 0);
        background-image: linear-gradient(rgb(242, 242, 242), rgb(242, 242, 242) 1em, rgb(255, 255, 255));
    }

我正在使用bootstrap，我不想使用表来实现这一点。左侧是固定宽度4em，右侧应填充宽度的其余部分。我一直在玩这个问题一段时间，并认为堆叠在流动的人群可能会指出我正确的方向。

here is a plunker

Answer 1

只需将日期容器浮动到左侧，并为.details添加边距：

.date{
    display: block;
    text-align: center;
    width: 4em;
    background-image: linear-gradient(#fff,#fff 1em,#e7e7e7);
    border-radius: 5px;
    float: left;
}

同样地：

.details{
    padding: 5px;
    border-radius: 6.5px;
    background-color: white;
    border: 1px solid rgb(204, 204, 204);
    margin-left: 5em;
}

请注意，使用此方法不需要width .details属性。

Updated Plunker

Answer 2

您可以将日期的显示属性设置为table-cell：

.date,.details {
    display:table-cell;
}

<强> bootply example

Answer 3

您只需float:left .date div并将margin-left:4em或更多内容应用于.details div。

<强>样本

http://plnkr.co/edit/V45nM6qPSuIclCvVDQe0?p=preview

当一个是固定大小时，我如何保持两个div并排

3 个答案: