Question

我正在尝试在我的网页上创建一个响应部分。我将使用媒体查询来调整内容大小并关闭内容块，但我还需要添加以下行为。

在页面上，我有3列，如下所示：

enter image description here

黄色和绿色块与固定宽度部分有关 - 将它们视为侧边栏。

红色块需要流畅并填充父包装内的可用空间。可以隐藏一个或多个固定宽度块，因此不可能在流体块上使用右边距或填充，因为它可能相关或不相关。因此，我努力想出一个解决方案。

以下是可能位于页面上的HTML示例。

<div class="wrap">
    <div class="fluid">
        <p>This should expand to fill the space available</p>
    </div>
    <div class="fixed">
        <p>Fixed width, but can be hidden</p>
    </div>
    <div class="fixed">
        <p>Fixed width, but can be hidden</p>
    </div>
</div>

任何想法如何实现这一目标？

Answer 1

试试这个

<div class="wrap">
    <div class="fixed">
        <p>Fixed width, but can be hidden</p>
    </div>
    <div class="fixed">
        <p>Fixed width, but can be hidden</p>
    </div>
    <div class="fluid">
        <p>This should expand to fill the space available</p>
    </div>
</div>

CSS

.fixed{
    float: right;
    height: 200px;
    width: 200px;
    background: #000;
    color: #fff;
}
.fixed:first-child{background:red;}
.fluid{
    overflow: hidden;
    height: 200px;
    background: red;
}

链接到Fiddle

Answer 2

您可以更改HTML并使用浮点数：

＆＃13;

.fixed {
  float: right;
  width: 25%;
}
.wrap, .fluid { /* Clear float */
  overflow: hidden;
}

＆＃13;

<div class="wrap">
  <div class="fixed">
    <p>Right - Fixed width, but can be hidden</p>
  </div>
  <div class="fixed">
    <p>Center - Fixed width, but can be hidden</p>
  </div>
  <div class="fluid">
    <p>Left - This should expand to fill the space available</p>
  </div>
</div>

＆＃13;

或者，新方法是使用灵活的方框：

＆＃13;

.wrap {
  display: flex;
}
.fixed {
  width: 25%;
}
.fluid {
  flex-grow: 1; /* Grow to cover remaining space */
}

＆＃13;

<div class="wrap">
  <div class="fluid">
    <p>Left - This should expand to fill the space available</p>
  </div>
  <div class="fixed">
    <p>Center - Fixed width, but can be hidden</p>
  </div>
  <div class="fixed">
    <p>Right - Fixed width, but can be hidden</p>
  </div>
</div>

＆＃13;

Answer 3

你可以尝试这样的事情（使用jquery）：

width_equalizer();

$(window).resize(function(){
    width_equalizer();
});


function width_equalizer()
{
    var width_of_fixed = 100
    var viewport_width = $(document).width();
    $('.fixed').css('width',width_of_fixed)
    $('.fluid').css('width',viewport_width - (2.5*width_of_fixed))
}

.fluid{
    display:inline-block;
    background:red;
    height:100px;
    vertical-align:top;
}

.fixed
{
    display:inline-block;
    height:100px;
    vertical-align:top;
}

.wrap
{
    width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="wrap">
    <div class="fluid">
        <p>This should expand to fill the space available</p>
    </div>
    <div class="fixed" style="background:yellow;">
        <p>Fixed width, but can be hidden</p>
    </div>
    <div class="fixed" style="background:green;">
        <p>Fixed width, but can be hidden</p>
    </div>
</div>

DIV填补可用空间

3 个答案: