html - 让 div 填充居中容器旁边的空间

Question

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

布局如下： div - 容器。容器居中的位置，容器的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>

带有此代码的 jsfiddle 可在http://jsfiddle.net/7QJQn/上找到

Answer 1

这是关闭的选项

http://jsfiddle.net/7QJQn/4/

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

Answer 2

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

基本上，您需要 50% 的视口宽度 (50vw) 减去 #container 宽度的一半（因此您从 #container 的中心测量并使用所有值的一半） - 我假设您重新确定绝对定位#lef 到视口以使其保持在右侧？

CSS（在这里小提琴）：

#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;
}​

例子

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 。看到这个小提琴。