将一个 <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;}

- Kenny Amaro

---

从您在下面评论中提供的网站来看，您的HTML存在一些错误。例如，您有没有相应的开放标签的</tr>标签。请通过HTML验证器运行您的页面并修复明显的错误。更好的做法是为布局目的摆脱表格。 - Jon P

我知道那个问题，但是我需要修复头部的那个。 - Kenny Amaro

损坏的 HTML 可能是您的问题。当存在随机不匹配标签时，结果可能会是随机的。如果您使用有效或至少不损坏的 HTML，则 @index 的答案应该适用于您。 - Jon P

Answer 1

首先，我知道这只是一个示例，但不要使用数字作为类的第一个字符（CSS类名/选择器中哪些字符是有效的？）。

而这是我通常用来解决这个问题的方法。

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

- index

---

不用担心（只是打了一些字来达到字符限制） - DylanB

你能检查一下这个fiddle并确认它是你想要的吗？如果不是，也许你可以截个小屏幕截图？ - index

我正在工作的网站是http://www.gioccocraft.com/index.php，请告诉我相关信息。 - Kenny Amaro

是的，我正在尝试，但如果您能看到网站gioccocraft.com/index.php...它无法工作。 - Kenny Amaro

好的，请带我走一遍，w/c 应该在中间，右边的是哪一个？ - index

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>

- Kishan

Answer 3

试试这样写：

html

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

样式表

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

这是 Fiddle link。

- Laky

---

它还没有工作:S 我不知道为什么。 - Kenny Amaro

是的，我看不出有任何问题，但这个示例无法运行。（请显示在一行内） - DylanB

@DylanB 你的意思是即使在 Fiddle 中它也显示为一行吗？ - Laky

我正在工作的网站是http://www.gioccocraft.com/index.php，请告诉我相关信息。 - Kenny Amaro

小提琴将div放在不同的行上。@kennyamaro那个网站有一些问题，我相信你会解决，但是为了良好的用户体验，请获取一个更小的Pear Earrings图像，那是一个2mb的文件，观看它加载是痛苦的。 - DylanB

这些错误是我必须修复的问题，但我正在谈论标题以及如何对齐这些元素。 - Kenny Amaro

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

- Fliko Genso