Question

我有那些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：向左漂， 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.自动宽度因此将填充所有剩余尺寸740px

Answer 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/

Answer 2

为什么不将 .div2 上的宽度：20％设置为？

Answer 3

首先将“.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

DIV向左浮动，自动宽度适合MAN div，宽度为980px

3 个答案: