Question

我在这里遇到了一个棘手的情况。我试图在我的页脚中居中3个div，他们需要有动态宽度，如最小宽度。

[cotainer           [first]        [second]         [third]         /container]

我的设置是这个

<footer>
  <div id="container">
     <div id="first"></div>
     <div id="second"></div>
     <div id="third"></div>
  </div>
</footer>

footer #container { width: 800px; margin: 0 auto; }

#container #first,#container #second,#container #third
{
  float: left;
  min-width: 200px;
  height: 25px;
  background: /* image url */
  padding: 4px;
  margin: 0 20px 0 0;
}

#container #third { margin-right: 0; }

Answer 1

将容器设置为显示为：table并将其边距设置为0 auto。

#container {
    display:table;
    margn:0 auto;
    whitespace: nowrap;
}

#first, #second, #third {
    min-width: 200px;
    float:left
    ...
}

演示：http://jsfiddle.net/AZ4yT/1/

编辑：它在IE中左对齐。所以你可能想要使用一种解决方法

Answer 2

你应该使用display：table;和表格单元格。

#container {
    display:table;
}

#first, #second, #third {
    display: table-cell;
    width: 200px;
    height: 40px;
    border: 1px dashed #000;
}

Demo available here

Answer 3

使用display: inline-block怎么样？你可以在这里看到一个jsFiddle：

http://jsfiddle.net/S7bKT/1/

<强> HTML

<div id="container">
   <div id="first">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Aliquam scelerisque euismod auctor. Sed pulvinar nulla eu 
      lorem iaculis ultrices. Mauris
   </div>
   <div id="second">Lorem ipsum dolor sit amet</div>
   <div id="third">Sed pulvinar nulla eu lorem iaculis ultrices</div>
</div>

<强> CSS

#container {
   width: 500px;
   background: #dedede;
   margin: 0 auto;
   text-align: center;
}

#first, #second, #third {
    display: inline-block;
    min-width: 50px;
    max-width: 120px;
    min-height: 100px;
    zoom: 1; /* Fix for IE */
    _display: inline; /* Hack for IE */
    margin-right: 20px;
    vertical-align: top;
}

#first {
    background: #f00;
}
#second {
    background: #0f0;
}
#third {
    background: #00f;
}

#container div:last-child {
    margin-right: 0;
}

中心3 div in footer with dynamic with？

3 个答案: