Question

我尝试使用div标签而不是表格，以便我的内容更适合移动设备。但是，我非常确定这是一种更清晰的方式来编码我所拥有的（它确实有效）。有没有更好的方法去做我正在做的事情？

<div style="text-align: center;">
  <span style="font-size:22px;"><strong>Lehigh Athletics Awards and Achievements</strong></span>
</div>
<hr />
<div style="text-align: center;">
  <span style="font-size:18px;">2014 Convocation Highlights</span>
  <br /> 
</div>
<div style="float: left; width: auto; margin-right: 14px; text-align: center;">
  <img style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/5/6/ProgramIcon.png" />
</div>
<div style="float: left; width: auto; margin-right: 14px; text-align: center;">
  <iframe width="300" height="169" src="//www.youtube.com/embed/fmyazgq2p7k" frameborder="0" allowfullscreen=""></iframe>
</div>
<div style="float: left; width: auto; text-align: center;">
  <iframe width="300" height="169" src="//www.youtube.com/embed/fmyazgq2p7k" frameborder="0" allowfullscreen=""></iframe>
</div>
<div style="clear:both;height:1em;"></div>
<hr />
<div style="text-align: center;">
  <font size="4">2014 Covocation Department Awards</font>
  <br /><font size="2"><i>Lehigh Athletics values achievements in the following areas:</i></font>
</div>
<div style="clear:both;height:1em;">
  <div style="">
    <img mediaid="9491" style="float: left; width: 18%; margin-right: 50px;" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/5/8/Academics2.png" />
  </div>
  <div style="">
    <img mediaid="9491" style="float: left; width: 18%; margin-right: 10px;" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/5/8/Academics2.png" />
  </div>
  <div style="clear:both;height:1em;">
    <div style="float: left; width: 18%; margin-right: 50px;">
      <img mediaid="9484" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Taryn_Carroll_0082.jpg" />
    </div>
    <div style="float: left; width: 18%; margin-right: 10px;">
      <img mediaid="9485" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg" />
    </div>
    <div style="float: left; width: 18%; margin-right: 10px;">
      <img mediaid="9485" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg" />
    </div>
    <div style="float: left; width: 18%; margin-right: 10px;">
      <img mediaid="9485" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg" />
    </div>
    <div style="float: left; width: 18%; margin-right: 10px;">
      <img mediaid="9485" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg" />
    </div>
  </div>
</div>

Answer 1

正如Albert在评论中提到的，您可以在HTML文档中使用 Cascading Style Sheets 而不是内联样式。使用CSS，您可以添加以下样式：

div {
    text-align: center;
}

在CSS文件中编写一次，此样式将应用于所有div元素。您还可以将类和/或 ID 添加到div（或其他）元素中：

<div class="cool"></div>
<div class="cool"></div>
<footer class="cool"></footer>

使用CSS将样式应用于该类的所有元素：

.cool {
    text-align: center;
}

Answer 2

首先，您不需要在每个元素上使用div。 div适用于整组元素。

其次，您可能想要使用样式表，这是最简单的学习方式。您可以在元素中添加id属性，然后您可以编辑样式，例如

style="float: left; width: 18%; margin-right: 10px;"

或

mediaid="9485" style="" 
  src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg"

样式表上的

（它将级联;因此 CSS ），而不是在HTML代码上反复重复。

祝福。

用div标签编写代码的更简洁方法？

2 个答案: