Javascript 6分部'；s、 一个容器DIV，分为3对，每组2个，左、中、右对齐

我的头衔够强吗

我想要一个水平长度的DIV，然后我想要其中的6个DIV，分成2组（信息，图片），左侧的组固定在墙上，右侧的组固定在墙上，中间的组正好在中间

以下是我目前的代码：

<div class="contactus.container">

<div class="contactus.left">
    <div><b>asdf</b></div>
    <div><b>sadf</b></div>
    <div>asdf</div>
    <div>sadf</div>
    <div>asdf</div>
    <div>asdf</div>
    <div>af</div>
</div>
<div class="content" style="display:inline-block" >
    <img align="left" alt="pic" class="bold" 
        src="profilepic.jpg" 
        style="width: 125px; height: 125px;" vspace="0" />
</div>

<div class="contactus.center">
    <div><b>asdf</b></div>
    <div><b>sadf</b></div>
    <div>asdf</div>
    <div>sadf</div>
    <div>asdf</div>
    <div>asdf</div>
    <div>af</div>
</div>

<div class="content" style="display:inline-block">
    <img align="left" alt="pic" class="bold" 
        src="profilepic.jpg" 
        style="width: 125px; height: 125px;" vspace="0" />
</div>

<div class="contactus.right">
    <div><b>asdf</b></div>
    <div><b>sadf</b></div>
    <div>asdf</div>
    <div>sadf</div>
    <div>asdf</div>
    <div>asdf</div>
    <div>af</div>
</div>

<div class="content" style="display:inline-block;">
    <img align="right" alt="pic" class="bold" 
        src="profilepic.jpg" 
        style="width: 125px; height: 125px;" vspace="0" />
</div>
<div style="clear:both;"></div>
</div>

---

现在有点沮丧了。它所做的就是在左边画一条线。所有6个div。

我认为您的类命名和格式不正确

尝试按如下方式重命名css类：

 .contactus_center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

<div class="contactus_center">

您的HTML如下所示：

 .contactus_center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

<div class="contactus_center">

---

首先，你不能在你的类名中使用

，正如@grammar在评论中提到的那样（把它复制到答案中的道具是@Scot）。当您在css中引用

.contactus.left

时，它将查找具有两个类的元素，如

class=“contactus left”

。对于类名为contactus.left的div，您可以给它们两个单独的类，如

，或者使用分隔符，如下划线或连字符，如

但是，纠正这一点并不能解决您的问题。至于你想要完成什么，我相信你的意思是说你想要2组3人（左、中、右）。要实现这一点，您将希望每个子div具有

显示：内联块

样式，而不仅仅是中心div，并且为了确保中心div实际上位于页面的中心，您将希望在三个内部div之间划分容器的宽度，并为每个子div指定适当的文本对齐值

看这个

---

您可以自己管理div大小，只需为每个div的宽度指定一个百分比。或者，有一些css框架，如和，可以帮助您使用基本上使用百分比和内联块元素的网格系统来管理页面布局，并为您提供直观的类名，以便轻松地将内容放在所需的位置。

请尝试

display:table cell

我很确定您不能在CSS类名中使用

。因此，

class=“contactus.center”

或

class=“contactus.right”

将不会像您在这里看到的那样工作。