1

我有那些 DIV'S

<div class='content'>
  <div class='div2'>content 2</div>
  <div class='div2'>content 2</div>
  <div class='div2'>content 2content 2</div>
  <div class='div2'>content 2</div>
  <div class='div1'>content 1</div>
</div>

主 div 是固定大小 = 980px，在它里面我有 DIV class'div1' 它的浮动 RIGHT 并且是固定大小。我希望DIV2类的DIVS是：1.向左浮动，2.自动宽度，以便填充所有剩余大小740px，3.'div2'内的内容对齐中心。

我有这个 CSS 代码：

.content { width:980px; overflow: hidden; border: 1px solid #ccc; padding:5px;}
.div1 { overflow: hidden; float:right; width: 140px;}
.div2 { float:left; width: auto; border-right: 1px solid #ccc; text-align:center;}

但我无法达到 2. 自动宽度，因此 thay 将填充所有剩余大小 740px

4

3 回答 3

1

最简单的方法是用一张桌子来做，你可能知道怎么做。

<div class='content'>
    <table class="divs2">
        <tr>
        <td class='div2'>content 2</td>
        <td class='div2'>content 2</td>
        <td class='div2'>content 2content 2</td>
        <td class='div2'>content 2</td>
        </tr>
    </table>
  <div class='div1'>content 1</div>
</div>

CSS：

.content { width:980px; overflow: hidden; border: 1px solid #ccc; padding:5px;}
.div1 { overflow: hidden; float:right; width: 140px;}
.divs2{ float:left; width:740px;  }
.div2 { border-right: 1px solid #ccc; text-align:center;}

看看这个：http: //jsfiddle.net/UCJA3/

于 2013-01-26T19:37:04.077 回答
0

为什么不将.div2上的width: 20%设置为 ？

于 2013-01-26T19:28:36.327 回答
0

首先将“.div-2”包装在一个外部容器中：

<div class='content'>
   <div class="div-2-wrapper">
      <div class='div2'>content 2</div>
      <div class='div2'>content 2 content 2</div>
      <div class='div2'>content 2</div>
      <div class='div2'>content 2</div>
  </div>
  <div class='div1'>content 1</div>
</div>

现在将“div-2-wrapper”类的宽度设为 840px（剩余的总空间）并将其浮动到左侧：

.div-2-wrapper{
    float: left;
    width: 840px;   
}

最后，给每个“div-2”类一个 209px 的宽度。您希望它们为 209 而不是 210 像素宽的原因是因为每个都包含一个 1px 右边框。jsFiddle

于 2013-01-26T20:13:00.607 回答