CSS：彼此相邻的2个div，一个向右浮动，另一个需要在剩余空间中居中

Question

我有2个div彼此相邻。 包装尺寸为宽度：100％。 右对齐的div是230px。 右边对齐的div旁边的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

您可以尝试下面的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 2

定义元素将在哪里居中的容器宽度（此元素position: relative;居中元素将只是在前面提到的内部而margin: 0 auto;有div不在容器内（右div） ，只是float:right;之外的。{/ p>

Answer 3

以下示例可帮助您实现所需的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

Answer 4

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

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 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

尝试下面的 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 7

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

<强> 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;
}

---

注意：我建议居中到列，个人设计偏好。如果您居中到窗口，空白区域将是不平衡的。再一次，只是我的意见。