javascript - 6 个子 DIV，一个容器 DIV，分成 3 对 2，左、中、右对齐

Question

我的头衔够强吗？

我想要一个水平长度为一页的 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>

这是 CSS:

.contactus.container {
    width:100%;
    text-align:center;
}

.contactus.left {
    float:left;
    width:100px;
}

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

.contactus.right {
    float:right;
    width:100px;
} 

.content {
    display: inline-block;
      vertical-align: top;

现在有点沮丧。它所做的只是在左侧有一条线。所有 6 个 div。

Answer 1

首先，您不能使用 .在你的类(class)名称中，正如@grammar 在评论中提到的那样(支持@Scot 将其复制到答案中)。当您引用 .contactus.left 时在您的 CSS 中，它将查找具有两个类的元素，例如 class="contactus left" .对于类名称为 contactus.left 的 div ，你可以给他们两个单独的类，比如 <div class="contactus left">或使用下划线或连字符等分隔符，例如 <div class="contactus-left"> .

但是，更正它并不能解决您的问题。至于你想要完成什么，我相信你的意思是说你想要 2 组 3(左、中、右)。为此，您需要每个子 div 都有 display: inline-block。样式而不仅仅是中心 div，并确保中心 div 实际上在页面上居中，您需要在三个内部 div 之间划分容器的宽度，并为每个分配适当的文本对齐值。

查看此 fiddle .

您可以自己管理 div 大小，只需为每个 div 的宽度分配一个百分比。或者，有像 foundation 这样的 css 框架。和 bootstrap帮助您使用基本上使用百分比和行内 block 元素的网格系统管理页面布局，并为您提供直观的类名，以便轻松地将您的内容放在您想要的位置。