Question

如果我使用父div的滚动，如何在父div中显示100％的div子宽度。

下面是一张图片看看这张图片的想法。如第二张图所示，我想要这样的东西。

Have a look this picture for idea http://www.fzkforum.com/CHILD-ISSUE.JPG

以下是我的HTML代码。

<!--/*main div starts*/-->
<div style="width:480px; margin:auto; border:solid 2px; padding:10px;">

<!--/*parent div starts*/-->
<div style="overflow:scroll; height:300px; padding:10px; " >

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<td>htrh</td>
<td>htrh</td>
<td>htrht</td>
<td>htrht</td>
<td>rhtrht</td>
<td>rhtrht</td>
<td>htrhth</td>
<td>hthtrh</td>
<td>htrh</td>
<td>htrh</td>
<td>htrht</td>
<td>htrht</td>
<td>rhtrht</td>
<td>rhtrht</td>
<td>htrhth</td>
<td>hthtrh</td>
<td>htrh</td>     
<td>htrh</td>
<td>htrht</td>
<td>htrht</td>
<td>rhtrht</td>
<td>rhtrht</td>
<td>htrhth</td>
<td>hthtrh</td>
<td>htrh</td>
<td>htrh</td>
<td>htrht</td>
<td>htrht</td>
<td>rhtrht</td>
<td>rhtrht</td>
<td>htrhth</td>
<td>hthtrh</td>

<td>htrh</td>
<td>htrht</td>
<td>htrht</td>
<td>rhtrht</td>
<td>rhtrht</td>
<td>htrhth</td>
<td>hthtrh</td>      <td>htrh</td>
<td>htrh</td>
<td>htrht</td>
<td>htrht</td>
<td>rhtrht</td>
<td>rhtrht</td>
<td>htrhth</td>
<td>hthtrh</td>
<td>htrh</td>
<td>htrh</td>
<td>htrht</td>
<td>htrht</td>
<td>rhtrht</td>
<td>rhtrht</td>
<td>htrhth</td>
<td>
link
</td>
</tr>
</table>

<!--/*child div starts*/-->
<div style=" border: solid 1px #ccc;">i want this  div 100% is it possible?  </div>

<!--/*child div ends*/-->
</div>
<!--/*parent div ends*/-->

</div>
<!--/*main div ends*/-->
enter code here

提前致谢

Answer 1

有一个child-div类，宽度为480px;

 .child{
  width:480px;
}

Answer 2

使用表格和表格单元格属性可以实现此目的。但是你需要在代码中添加更多的分区，如下所示。

 <div style="width:480px; margin:auto; border:solid 2px; padding:10px;">

 <!--/*parent div starts*/-->
 <div style="overflow:scroll; height:300px; padding:10px; " >
 <div style="display:table">
 <div style="table-row">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">

  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>

  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>htrh</td>
  <td>htrh</td>
  <td>htrht</td>
  <td>htrht</td>
  <td>
   link
  </td>
 </tr>
 </table>
 </div>
 <!--/*child div starts*/-->
 <div style="display:table-row">
 <div style=" border: solid 1px #ccc; display:table-cell;">i want this  div 100% is it possible?  </div>
  </div>
  </div>
 <!--/*child div ends*/-->
 </div>
 <!--/*parent div ends*/-->

 </div>

Have a Fiddle

父div中的子div的100％宽度未到来

2 个答案: