Question

我试图让两个div并排坐着，其中一个div扩展以填补空白区域。

我正在处理的网站有一个链接，旁边有一个颜色块。颜色块应该保留div的宽度，具体取决于链接文本占用的空间。

最初，我尝试并排浮动Div，但是在降低屏幕尺寸时这不起作用。我也尝试过内联块，但这也不起作用。

最后，我尝试了解决方案here，这再次没有用。我哪里错了？

我的代码是：

<div class="link-wrapper">

    <div class="block yellow">
    </div><!--/ Block -->

    <div class="link">
        <p><a href="#</a></p>
    </div><!--/ Link -->

</div>

CSS是：

.link-wrapper{
    width:100%;
    overflow:hidden;}

.block{
    overflow:hidden;
    height:15px;}

.link{
    float:right;}

Answer 1

我猜这里 - 我的水晶球告诉我你需要这个：）

HTML：

<div class="link-wrapper">
     <div class="block yellow">
          <div class="link">
               <p><a href="#">Look Book '15</a> &gt; &gt;</p>
          </div><!--/ Link -->
     </div><!--/ Block -->   
</div>

CSS：

.block {
  overflow: hidden;
  height: 21px;
}
.link {
  float: right;
  background: #F1F1F1;
  padding-left: 10px;
}

所以基本上 - 我不认为你可以设置两个div，彼此相邻，而不是明确地固定其中至少一个的宽度，然后使用calc()函数来做必要的计算。上面的代码模仿了这个外观，但是html结构略有不同，其中link是多彩父div元素的子元素。

编辑：

根据评论，可以选择使用flex box，以避免更改html：

/* Flexbox way */

.link-wrapper {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.block {
  overflow: hidden;
  height: 21px;
  flex-grow: 2;
}
.link {
  float: right;
  padding-left: 10px;
}

flex-grow在这里完成工作的重要位 - ＆＃34;它定义了Flex项目在必要时增长的能力＆＃34;。

所以你在这里有很好的选择：
1 - 修改标记，并在父div中嵌套链接，或者
2 - 如果您不担心过多的浏览器支持，您可以使用flexbox而无需触摸您的HTML

扩展内嵌

1 个答案: