CSS：2个div并排，一个向右浮动，另一个需要在剩余空间居中

Question

我有 2 个相邻的 div。 包装器尺寸为宽度：100%。 右对齐的 div 为 230px。 右对齐旁边的 div 需要在容器中居中以保持响应。 左边距只是暂时的，因为它拥抱左对齐的 div。

CSS

.wrapper{
width: 100%;
margin: 0 auto;
}

.col-browse{
float: left;
width: 230px;
}

.col-content{
float: left;
width: 1080px;
margin-left: 30px;
 } 

HTML

<div class="col-browse">
</div>  
<div class="col-content">
</div>

谢谢！

编辑：http://i.imgur.com/8Y7XXAx.png 这就是我得到的，我需要将中间部分居中，同时保持左列向左对齐

Answer 1

定义元素居中位置的容器宽度（此元素position: relative; 居中元素将简单地位于前面提到的内部，margin: 0 auto; 具有不在容器内的 div（右 div），只需 @987654323 @外面。

Answer 2

你可以试试下面的css代码。

.wrapper{
  width: 100%;
  margin: 0 auto;
}
.col-browse{
  float: right;
  width: 18%;
  border: 1px solid #cccccc;
  height: 100px;
}
.col-content{
  width: 82%;
  margin:0 auto;
  border: 1px solid #000;
  height: 100px;
} 

Answer 3

试试下面的CSS：

html,body,.wrapper{
    width: 100%;
    margin: 0 auto;
}

.wrapper{
    position:relative;
}

.col-browse{
    position:absolute;
    text-align:center;
    width: 230px;
}

.col-content{
    text-align:center;
    width: 1080px;
    margin-left: 30px;
}

Demo

---

如果您希望它在所有屏幕尺寸中居中，请尝试以下小提琴：

Demo2（更新）

Answer 4

这种尝试使侧边栏的宽度和居中内容的宽度保持不变。

HTML

<div class="right">
    <div class="center"></div>
</div>
<div class="left"></div>

---

以窗口为中心

Fiddle

CSS

div.left {
    float: left;
    width: 230px;
    height: 20px;
    position: relative;
}
div.right {
    height: 20px;
    position: absolute;
    left: 0;
    right: 0;
}
div.center {
    height: 50px;
    width: 50px;
    margin: 0 auto;
}

---

以列为中心

Fiddle

CSS

div.left {
    float: left;
    width: 230px;
    height: 20px;
}
div.right {
    height: 20px;
    position: absolute;
    right: 0;
    left: 230px;
}
div.center {
    height: 50px;
    width: 50px;
    margin: 0 auto;
}

---

注意：我建议以列居中，个人设计偏好。如果您以窗口为中心，则空白区域将失去平衡。再说一次，只是我的看法。

Answer 5

这可能就是你需要的.. FIDDLE

.wrapper{
  width: 100%;
  height:500px;
  margin: 0 auto;
  background-color:Yellow;
}

.col-browse{
     float: left;
     width: 20%;
     height:500px;
     background-color:Red;
}

.col-content{
    width: 80%;
    height:500px;
    margin-left:21%;
    background-color:Blue;
 } 

Answer 6

尝试使用相对值（百分比），这将帮助您创建响应式网站。例子：

http://jsfiddle.net/XkPay/

.wrapper{
width: 100%;
}

.col-browse{
float: left;
width: 18%;
background-color:black;
}

.col-content{
float: left;
width: 82%;
    background-color:red;
 } 

Answer 7

下面的例子可以帮你实现你想要的style

CSS

.l,.r{
width:30%;
height:200px;
background:red;
}

.l{
float:right;
}

.r{
margin:0 auto;
}

.wrap{
float:left;
width:70%;
background:blue;
}

html

<div class="wrap">
<div class="r"></div>
</div>
<div class="l"></div>

工作示例JSFIDDLE