Question

这可能听起来很傻但不能自己做:( 需要你帮助的人。如何使用DIV（+ CSS）代替TABLE来激活标记？

    <table>
    <tr>
        <td>
            <img src="logo_left.gif" />
        </td>
        <td align="center">
            <p><strong>THE TITLE!!!</strong></p>
        </td>
        <td>
            <img src="logo_right.gif" />
        </td>
    </tr>
  </table>

提前致谢！

有些人问我发布了迄今为止我尝试过的内容...... CSS

   <style type="text/css">        
      .header 
      {
        border: 1px solid black;
        border-bottom-width: 0px;
        background-image: url("Images/spriterepeatx.png"); 
        background-position: 0 -85px !important; 
        background-repeat: repeat-x; 
        background-color: transparent;
        height: 76px;
        font-family: Arial,Helvetica,sans-serif;
      }
     .LeftLogo a 
     {
        display: inline;
        float:left; 
        height:25px; 
        margin: 25px 0 25px 25px; 
        position:relative; 
        width:227px;
        background: url("Images/left_logo.gif") no-repeat scroll 0 0 transparent;
     }
     .RightLogo
     {
        width:100px;
        height:100px;
        background: url("Images/right_logo.png") no-repeat scroll 0 0 transparent;
     }         
     p.promo {
      font-size: 150% !important;
      line-height: 22px;
      margin-top: 25px;
      text-align: center;
      white-space:nowrap;
    }

</style>

HTML：

<body> <div class='header'>
  <div class="LeftLogo"><a title="My company logo" href="http://www.mycompany.com"></a></div>
  <div><p class="promo"><strong>MYProduct</strong> - Superb product</p></div>
  <div class="RightLogo"></div> </div> </body>

Answer 1

首先，您首先为div设置display: inline样式，因为默认情况下它是一个“块”，然后您可以根据需要定位每个div。

“block”div占据整个水平空间，但是使用“inline”可以指定它需要占用的空间。没有给出“px”或“百分比”的宽度和限制取决于你的创造力。

您在div中的上述代码如下所示：

<div class="divcolumn">
    <img src="logo_left.gif" />
</div>

<div class="divcolumn" style="text-align:center">
   <p><strong>The Title!!!</strong></p>
</div>

<div class="divcolumn">
    <img src="logo_right.gif" />
</div>

现在指定样式：

.divcolumn { 
    display: inline;
}

您甚至可以为每个列编写单独的样式，例如“divcolumn-right”，“divcolumn-center”和“divcolumn-left”，并指定不同的样式。例如，获取液体布局分别指定宽度为“30％”，“40％”和“30％”。

Answer 2

我自己用css来完成这个任务。我有一般的表格，行和单元格样式，然后我合并了特定的其他样式用于演示（交替的行颜色，选定的行粗体等）。这是我的一个表（擦洗）的html：

<div class="table grid">
    <div class="tr gridHeader">
        <div class="tdColumn1">
            <input type="checkbox" id="chkSelectAll" />
        </div>
        <div class="tdColumn2">
            <strong>Header1</strong>
        </div>
        <div class="tdColumn3">
            <strong>Header2</strong>
        </div>
        <div class="tdColumn4">
            <strong>Header3</strong>
        </div>
        <div class="tdColumn5">
            <strong>Header4</strong>
        </div> 
    </div>


    <div class="tr tdWhite">
        <div class="tdColumn1">
            <input type="checkbox" name="checkbox1" />
    </div>

            <div class="tdColumn2">
                    <p>Data1</p>
            </div>

            <div class="tdColumn3">
                    <p>Data2</p>
            </div>

            <div class="tdColumn4">
                    <p>Data3</p>
            </div>

            <div class="tdColumn5">
                    <p>Data4</p>
            </div>
    </div>   

        <div class="tr tdGrey">
            <div class="tdColumn1">
                <input type="checkbox" name="checkbox1" />
            </div>

            <div class="tdColumn2">
                    <p>Data1</p>
            </div>

            <div class="tdColumn3">
                    <p>Data2</p>
            </div>

            <div class="tdColumn4">
                    <p>Data3</p>
            </div>

            <div class="tdColumn5">
                    <p>Data4</p>
            </div>
    </div>   

</div>

这是控制这些div的布局的css。我省略了大多数与外观相关的东西（字体，颜色等）。你必须自己调整宽度，百分比等。

div.table
{
    display: table;
}

div.tr
{
    display: table-row;
}

div.tdColumn1, div.tdColumn2, div.tdColumn3, div.tdColumn4, div.tdColumn5
{
    display: table-cell;
    padding: 4px;
}

div.tdColumn1
{
    width: 25px;
}

div.tdColumn2
{
    width: 20%;
}

div.tdColumn1, div.tdColumn2, div.tdColumn4, div.tdColumn5
{
    vertical-align: middle;
}

div.tdColumn1, div.tdColumn5
{
    text-align: center;
}

Answer 3

除了Navneeth的回答。 <tr>是一行，<td>是一列。您可以通过声明多种样式来定位<div>，然后将其应用于<div>。

<div class="somestyle-definition">
</div>

然后在样式表中

.somestyle-definition
{
    width:100%;
    border-bottom:solid 2px white;
}

Answer 4

有很多方法可以实现这一目标。一个起点可能是：

  <div class="float-left">
    <img src="logo_left.gif" />
  </div>
  <div class="float-left">
    <p><strong>THE TITLE!!!</strong></p>
  </div>
  <div class="float-left">
    <img src="logo_right.gif" />
  </div>

然后在你的CSS中：

.float-left {
    float:left;
}

这只会使你的所有元素彼此浮动。那不是很漂亮和语义不正确，但它确实有效。

Answer 5

HTML：

<h1>The title</h1>

CSS：

h1 {
    position: relative;
    height: 100px;
    line-height: 100px;
}

h1::before {
    position: absolute; top: 0; left: 0;
    content: url( http://placekitten.com/100/100 );
}

h1::after {
    position: absolute; top: 0; right: 0;
    content: url( http://placekitten.com/120/100 );
}

现场演示： http://jsbin.com/oqiyul/2

如何将a转换为<div> s </div> <table> </table>

5 个答案: