Question

我正在尝试对齐子div标签但是根据下面的图像我指定了width：auto，但是所有3 div都是左对齐。

fiddle link

有什么办法可以让子div自动扩展以适应父div的自由空间？

我遇到了几个问题，但与此无关，如果它重复，请道歉。

编辑：我希望所有3个div占据宽度的100％。而不是将它对齐到左边。我不能为每个分配33％，因为有时一个子div可能有更多的文本。

这里我的形象是我期待的......

some more clarification about what i expect

Answer 1

您可以使用table-cell或flex来实现您想要的（从您的父级获取所有宽度）。如果没有，那么另一种方法是玩你的孩子宽度百分比，也许一些显示内联..也浮动将搞乱，所以删除它.. 据我所知，你像上面的片段一样问smth：

＆＃13;

#parent {
  border: 1px solid #666;
  width:100%;
  min-height:150px;
  display: table;
}
.child {
  text-align:center;
  border:1px solid #0000ff;  
  padding:20px;
  background: #CCC;
  margin:10px;
  display:table-cell;
  vertical-align:middle;

}

＆＃13;

<div id="parent">
        <div class="child">
            test data 1
        </div>
         <div class="child">
            test data 2
        </div>
         <div class="child">
            test data 3
        </div>
</div>

＆＃13;

Answer 2

你可以用calc函数设置子元素的宽度。 62px = 20px左右填充，40px左右边距和2px左右边框

width:calc((100% / 3) - 62px);

Answer 3

有了你想要完成的效果。你不想浮动div。他们只需要拥有正确的CSS。

CSS

#parent {
    border: 1px solid #666;
    width: 100%;  
}
.child {
    border:1px solid #0000ff;
    background: #CCC;
    padding: 20px 30px;
    margin:20px 20px;
 }

jsfiddle for vertical alignment

以下编辑

如果你想要它们都在水平线上，你需要从html元素中删除空格，然后分配正确的宽度和边距。

HTML

<div id="parent">
    <div class="child">
        test data 1
    </div><!-- remove whitespace
     --><div class="child">
        test data 2
    </div><!-- remove whitespace
     --><div class="child">
        test data 3
    </div>
 </div>

CSS

* {
  box-sizing: border-box;
}

#parent {
  border: 1px solid #666;
  width: 100%;
}

.child {
  border: 1px solid #0000ff;
  background: #CCC;
  width: 30%;
  display: inline-block;
  padding: 10px;
}

.child:nth-child(2) {
  margin: 0px 5%;
}

Working Fiddle for horizontal alignment

Answer 4

为什么不尝试使用表格。您可以在<td>代码

中使用3个<tr>代码（表格数据）

基于父div

4 个答案: