清潔的方式來與div標籤代碼？

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

正如阿爾伯特在評論中提到的，你可以使用Cascading Style Sheets，而不是內聯樣式的HTML文件內。使用CSS，您可以添加如下樣式：

div { 
    text-align: center; 
} 

在CSS文件中寫入一次，此樣式將應用於所有div元素。你還可以添加類和/或標識到您的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&image_path=/images/2014/4/15/Lynn_Babich_0069.jpg" 

在樣式表（它會級聯;因此CSS）代替在HTML代碼上一遍又一遍地重複它。

祝福。