Question

我有一个非常复杂的响应标头。

左侧区块是固定宽度，右侧区块是百分比（100％）我在这里发现这篇伟大的文章如何做到这一点，除了我需要它反过来，这个例子是正确的块固定。

http://radiatingstar.com/make-a-layout-with-fluid-and-fixed-size-columns

我确实让它在某一点工作，但不记得我是怎么做的，应该没有滚动条，外部容器应该是100％。真正的问题是在右边的块中我有2个内部div，1个div应该在屏幕上水平居中而不是在div的中心，因为固定的左块已经将它推过去了。

<div id="container">

    <div id=fixed-width>

    </div>

    <div id=fluid>

        <div class="farRight">right icons</div>    
        <div class="centeredBlock">centered on screen block</div>   

    </div>


</div>

另一个挑战是响应部分，因为您可以看到右侧浮动的右侧图标块应该随着屏幕宽度缩小而移动到居中的块顶部。

看起来我需要浮动居中的块，但它也需要到屏幕的居中中心。

固定宽度左侧块也可能是浮动的，但它并不重要，因为在屏幕变小后我切换到完全不同的布局，它只是我需要居中和响应的2个内部div。

如果你能解决这个问题，你就是天才！

干杯！

Answer 1

这是一个工作示例。我刚刚摆脱了margin和float。然而，尽管答案很简单，但您应该在下面阅读以了解其原因。

Working Example

因为左div有一个float：left属性，你可以设置正确的div来占用剩余空间的100％。您不需要负余量来将div用于其位置。

此外，floated元素已从文档的正常流程中取出，因此现在您可以使用margin: 0 auto，只要右侧div具有100％宽度，它将居中于整个屏幕。

更新

通过评论提出了提问后请求。为了解决这个问题，我添加了媒体查询并删除了右侧div上的浮动。另外，我必须添加额外的标记，以便右侧的内部div可以正确定位。

Answer 2

这是经过修改的CSS。主要变化是：

无需浮动流体柱，而是添加左边距
要在屏幕上居中一个框，设置容器（而不是流体盒）的相对位置，并在包装盒上使用绝对定位

至于响应性，您可以简单地从元素中删除浮动，宽度，高度和定位，使它们显示为行。

＆＃13;

/* body margin/padding is reset to get media queries right */
body {
  margin: 0;
  padding: 0;
}
#container {
  position: relative;
  height: 100px;
}
#fixed-width {
  float: left;
  width: 250px;
  height: 100%;
  background-color: blue;
}
#fluid {
  margin-left: 250px;
  height: 100%;
  background-color: green;
}
.farRight {
  float: right;
  width: 100px;
  height: 40px;
  color: white;
  background-color: black;
}
.centeredBlock {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 200px;
  height: 40px;
  color: white;
  background-color: tomato;
}
/* when screen is narrower than 250+200+250 pixels trigger breakpoint 1 */
@media screen and (max-width: 699px) {
  .farRight {
    float: none;
    width: auto;
  }
  .centeredBlock {
    position: static;
    width: auto;
  }
}
/* when screen is narrower than whatever-you-want pixels trigger breakpoint 2 */
@media screen and (max-width: 499px) {
  #container {
    height: auto;
  }
  #fixed-width {
    float: none;
    width: auto;
    height: auto;
  }
  #fluid {
    margin-left: 0;
    height: auto;
  }
}

＆＃13;

<div id="container">
  <div id="fixed-width">fixed width</div>
  <div id="fluid">
    <div class="farRight">right icons</div>
    <div class="centeredBlock">centered on screen block</div>
  </div>
</div>

＆＃13;

CSS固定和百分比宽度与内部浮动和居中

2 个答案:

Working Example

更新