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

时间:2012-02-09 14:16:27

标签: css html

这可能听起来很傻但不能自己做:( 需要你帮助的人。 如何使用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>

5 个答案:

答案 0 :(得分:4)

首先,您首先为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%”。

答案 1 :(得分:1)

我自己用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;
}

答案 2 :(得分:0)

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

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

然后在样式表中

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

答案 3 :(得分:0)

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

  <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;
}

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

答案 4 :(得分:0)

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