2

我正在自学基本的 HTML 5 和 CSS，我一直在使用，div而不是table许多博主和 Web 开发人员所推荐的。但现在我有这个问题：

我正在尝试使表格看起来像这样：


（来源：webdesign-gm.co.uk）

使用此代码：

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 列。第一列分为另外 2 行，每行将有 50% 的 row2 高度。但事实并非如此。我如何解决它？基本上，我想要两列，第一列分为两行，但我不知道如何设置它。

4

1 回答 1

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>

如果您需要一些更复杂的元素，则必须使用 % 动态高度。

另一个提示不要设置内联样式，使其全部在 css 文件中

于 2013-10-16T17:13:55.427 回答