Question

我有一个网页，其中包含一个带内容的居中容器，我想在其旁边显示一个徽标。

布局如下：div - container。如果容器居中并且容器的div lef需要填写屏幕上留下的宽度。

html, body {
 height: 100%;
 width: 100%;
}
#container {
 width: 800px;
 margin-left: auto;
 margin-right: auto;
 min-height: 100%;
}

<div id="container">

</div>
<div id="lef">
</div>

http://jsfiddle.net/7QJQn/

提供了此代码的jsfiddle

Answer 1

这是关闭的选项

<强> http://jsfiddle.net/7QJQn/4/

我认为做这样的事情的最佳解决方案就是使用javascript / jQuery。

Answer 2

根据您希望支持的浏览器，您可以使用calc（）。

基本上，你想要50％的视口宽度（50vw）减去#container宽度的一半（所以你要从#container的中心开始测量并使用所有值的一半） - I＆＃ 39; m假设您对视口的绝对定位#lef是否正常，以使其保持在右侧？

CSS（fiddle here）：

#lef {
  background-color:yellow;
  width:calc(50vw - 100px);
  height:20px;
  position:absolute;
  right:0;
  top:0;
}

Answer 3

将此添加到您的css：

#lef{
  float:left
}

并更改html中div的顺序，如下所示：

<div id="lef"></div>
<div id="container"></div>

Answer 4

首先，您应该将标记包装在包装器div中，以便元素保持紧密。我做了一些修改，看看：

 <div id="wrapper">

  <div id="lef">

  </div>


  <div id="container">

  </div>

</div>

而css：

 html, body {
 height: 100%;
 width: 100%;

}

#wrapper{

width: 360px;

}

#container {
 width: 200px;
 margin-left: auto;
 margin-right: auto;
 height: 100px;
 background-color:red;
}
#lef {
background-color:yellow;
width: 160px;;
height:100px;
float: left;
}

Example

Answer 5

如果使用flexbox是一个选项，您可以使用flex-grow属性执行此操作：

使用以下标记

<div class="main-row">
  <div class="filler"></div>
  <div class="row-content">Fixed width centered div</div>
  <div class="filler"></div>
</div>

你需要在填充div上设置flex-grow：1。请参阅此fiddle。

让div填充居中容器旁边的空格

5 个答案: