Question

我的头衔是否足够强大？

我想要一个DIV，它是一个页面的水平长度，然后我想要在其中的6个div分组为2（info，pic）其中左边的组固定在墙上，组上的右侧固定在墙上，中间的组恰好位于中心。

到目前为止，这是我的代码：

<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

首先，你不能在你的类名中使用.，正如@grammar在评论中提到的那样（@Scot的道具将其复制到答案中）。当您在css中引用.contactus.left时，它会查找包含两个类的元素，例如class="contactus left"。对于具有类contactus.left等类名的div，您可以为它们提供两个单独的类，例如<div class="contactus left">或使用下划线或连字符之类的分隔符，例如<div class="contactus-left">。< / p>

然而，纠正这些并不能解决您的问题。至于你想要完成什么，我相信你的意思是说你想要2组3（左，中，右）。要实现这一点，您需要每个子div都具有display: inline-block样式而不仅仅是中心div，并且为了确保中心div实际上是在页面中心，您需要划分宽度三个内部div中的容器，并为每个div分配适当的text-align值。

请参阅此fiddle。

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

Answer 2

我认为您已经错误地命名并格式化了类。

尝试重命名css类，如下所示：

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

和您的HTML一样：

<div class="contactus_center">

6个子DIV，一个容器DIV，分为3对2，左，中，右对齐

2 个答案: