相关疑难解决方法(0)

似乎普遍认为表不应该用于HTML中的布局.

为什么？

我从来没有(或很少诚实地)看到这方面的好论据.通常的答案是:

• 将内容与布局分开是件好事
  但这是一个错误的论点; 陈词滥调.我想使用表格元素进行布局与表格数据几乎没有关系.所以呢？我的老板在乎吗？我的用户在乎吗？
  
  也许我或我的开发人员必须维护一个网页关注......一个表不易维护吗？我认为使用表比使用div和CSS 更容易.
  
  顺便说一下...为什么使用div或span将内容与布局和表格分开？只使用div来获得一个好的布局通常需要很多嵌套的div.

• 代码的可读性
  我认为这是另一种方式.大多数人都懂HTML,很少有人理解CSS.

• SEO最好不要使用表格
  为什么？任何人都可以证明它是有证据的吗？或谷歌发表的声明表示,从SEO的角度来看,表格是不受欢迎的？

• 表格较慢.
  必须插入额外的tbody元素.这是现代网络浏览器的花生.向我展示一些基准,其中使用表会显着减慢页面的速度.

• 如果没有桌子,布局检修会更容易,请参阅css Zen Garden.
  大多数需要升级的网站也需要新内容(HTML).新版本的网站只需要新的CSS文件的情况不太可能发生.Zen Garden是一个不错的网站,但有点理论上.更不用说它滥用 CSS了.

我真的对使用divs + CSS而不是表格的好参数感兴趣.

我希望图标和标题在同一行中,如下所示:

但我仍然是这样的:

代码:

.icon-small i{
  height: 38px;  
  width: 38px; 
  color: #fff;
  background-color: #888;
  border-radius: 10%;
  text-align: center;
  vertical-align: middle;
  padding-top: 12px;

}
.icon-small + p{
  margin-top: 15px;

}
.icon-small h4,
.icon-small h5{
  text-align: left;
}

<div class="row">
  <div class="col span-1-of-3">
    <span class="icon-small">
      <i class="fa fa-television"></i>
      <h4>Web applications</h4>
      <h5>Mobile & Tablets Ready</h5>
    </span>
    <p>Powerful, fast and robust web applications to cater for complex business needs.</p>
  </div>
  <div class="col span-1-of-3">
    <span class="icon-small">
      <i class="fa fa-mobile-phone"></i>
      <h4>Mobile apps</h4>
      <h5>For the iPhone, iPad & …

我是HTML新手,正在为我的家庭/自我项目创建一个网站,我遇到了一个小问题.我试图在文本两侧的标题内插入一个徽标.由于以下原因,我能够在文本的左侧获取图像:

徽标图像和H1标题在同一行

但是,我遇到了将图像放到文本另一侧的问题.

header.solid
{
  border-style: solid;
  border-width: 2px;
}

.header img
{
  float: left;
  width:75px;
  height:75px;
}

.header h1
{
  position: relative;
  top: 0px;
  left: 18px;
}


 <div class="header">
  <header class="solid">
  <img src="Pictures/Star_Img.png" alt="star"/>
  <h1 style="color:white;" align="center"><b>P &nbsp;R &nbsp;O &nbsp;V &nbsp;E &nbsp; N &nbsp; &nbsp; &nbsp;  &nbsp;L &nbsp;E &nbsp;A &nbsp;D &nbsp;E &nbsp;R &nbsp;S &nbsp;H &nbsp;I &nbsp; P</b></h1>
  </header>
 </div>

非常感谢任何帮助,如果这是一个简单的修复道歉

编辑:道歉所有,当我发布代码时,我删除了第二个img标记

这是目前的情况.

<div class="header">
<header class="solid">
  <img class="leftimg" src="Pictures/Star_Img.png" alt="star"/>
  <h1 style="color:white;" align="center"><b>TEST</b></h1>
  <img class="rightimg" src="Pictures/Star_Img.png" alt="star"/>
</header>
</div> …