个人中心
gpt4 book ai didi

css - 如何将 转换为
转载 作者：太空宇宙 更新时间：2023-11-03 22:02:49 24 4
gpt4 key购买 nike

这听起来可能很傻，但我自己做不到 :(需要你们的帮助。如何从下面激活标记但使用 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>

最佳答案

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

“ block ”div 占据整个水平空间，但使用“内联”您可以指定它需要占据的空间。没有给出可以“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%”。

关于css - 如何将 <table> 转换为 <div>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9212455/

24 4 0
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com