居中一个<div>并向右浮动

Question

我希望div“1”到中心，div“2”到右边。我能做什么？我有这个HTML

<div class="header">
  <div class="1"></div>
  <div class="2"></div>
</div>

和这个css

.1 {
display:inline-block; 
width:200px; 
height:120px;}
.2 {
display:inline-block; 
width:250px; 
height:120px;
float:right;}

Answer 1

首先我知道它只是示例，但不要使用数字作为类的第一个字符（Which characters are valid in CSS class names/selectors?）。

这就是我通常用来做的事情

<div id="block">
    <div id="right">Right</div>
    <div id="middle">Middle</div>
</div>

#middle {
    background-color: #494949;
    width: 200px;
    height: 120px;
    margin: 0 auto;
}

#right {
    background-color: #949494;
    width: 250px;
    height: 120px;
    float: right;
}

http://jsfiddle.net/index/npq5puc1/

Answer 2

试试这个

1。）根据CSS更改HTML元素以获得期望结果

.div1 {
display:inline-block; 
width:200px; 
height:120px;
  background:red;
  float:right;

}
.div2 {
display:inline-block; 
width:250px; 
height:120px;
float:right;
  background:blue;
}

<div class="header">
  <div class="div2">div 2 in right</div>
  <div class="div1">div 1 in center</div>
</div>

Answer 3

尝试这样;

HTML

<div class="header">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

CSS

.div1 
{
    display:block;
    background:#333;
    width:200px; 
    height:120px;
    margin:auto;
}
.div2 
{
    display:block; 
    background:red;
    width:250px; 
    height:120px;
    float:right;
}

这里是小提琴link。

Answer 4

试试这个 HTML：

<div class="header">
  <div class="1"></div>
  <div class="2"></div>
</div>

CSS：

[class='1'] {
display:inline-block; 
width:200px; 
height:120px;}
[class='2'] {
display:inline-block; 
width:250px; 
height:120px;
float:right;}