Question

我自己学习基本的HTML 5和CSS，并且我一直在使用div而不是table，正如许多博客和网站开发人员所推荐的那样。但现在我有了这个问题：

我正在尝试制作一个如下表：

http://www.webdesign-gm.co.uk/images/blog/html5-structure.jpg

使用此代码：

CSS

.table {
font-size:14px;
border-style:solid;
border-width:2px;
margin:0;
padding:3px;
text-align:center;
vertical-align:middle;
display:table-cell;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;}

HTML

<div align="center">
<div id="row1">
    <div class="table" style="min-width:500px;max-width:500px;">Random Number: <?php echo $gRandNum; ?></div>
</div>
<div id="row2" style="min-height:140px;">
    <div id="row2column1" style="float:left;">
        <div id="row2column1row1">
            <div class="table" style="border-top-style:none;border-right-style:none;min-width:150px;">test1</div>
        </div>
        <div id="row2column1row2">
            <div class="table" style="border-top-style:none;border-right-style:none;min-width:150px;">test2</div>
        </div>
    </div>
    <div class="table" style="border-top-style:none;min-width:350px;">
        test3<br>test3<br>test3<br>test3<br>test3<br>test3
    </div>
</div>
<div id="row3" style="width:500px;">
    <div class="table" style="min-width:500px;max-width:500px;border-top-style:none;">teste</div>
</div>

http://jsfiddle.net/XxRJe/2/ row2应该在其中有2列。并且第一列分为另外两行，每行将具有row2高度的50％。但那就是没有发生的事情。我如何解决它？基本上，我想要两列，第一列分为两行，但我不知道如何设置它。

Answer 1

您好检查此代码我试图解决您的问题http://jsfiddle.net/XxRJe/13/。要处理带有％的div的高度，你需要小心，因为为了使它工作，他的所有父母需要在％或px上设置高度来设置它。

这里是css

.table {
    font-size:14px;
    border-style:solid;
    border-width:2px;
    text-align:center;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
}
#row2 {
    height:300px;
    width:500px;
}
#row2column1, #row2column2 {
    width:50%;
    height:100%;
    color:#fff;
    background-color:#000;
}
#row2column1 .celd{
    height:50%;
    background-color:#666;
}

和HTML

<div>
  <div id="row1">
   <div class="table" style="min-width:500px;max-width:500px;">Random Number:<?php echo $gRandNum; ?></div>
  </div>
  <div id="row2" style="min-height:140px;">
   <div id="row2column1" style="float:left;margin:auto;">
    <div id="row2column1row1" class="celd">
     <div class="celd">test1</div>
     </div>
    <div id="row2column1row2" class="celd">
     <div class="celd">test2</div>
    </div>
  </div>
  <div id="row2column2" style="float:right">
   test3<br>test3<br>test3<br>test3<br>test3<br>test3
  </div>
 </div>
 <div id="row3" style="width:500px;">
  <div class="table" style="min-width:500px;max-width:500px;border-top-style:none;">teste</div>
 </div>
</div>

如果你需要更复杂的元素，你必须使用％dinamic高度。

其他提示未设置内联样式，请将其全部放入css文件中

如何在div中继承高度？

1 个答案: