Div樣式不適用

Question

我正在處理一個小議程日程示例，我在頁面頭部使用阻礙樣式表創建了一個小的html示例。

簡單地說，它是一個包裝div，作爲其他div的容器，這些div是計劃項目，這些項目divs中的每一個都包含兩側;左浮動div和右浮動div

我面臨的問題是設置這些浮動div的寬度，但css沒有被應用，並且它正在從父div繼承。

這裏是正在發生的截圖：

這裏是我的示例代碼：

CSS：

 .HeaderDiv 
     { 

     } 

     .SeparatorDiv 
     { 
      clear: both; 
     } 

     .AgendaItemsContainerDiv 
     { 
      width:800px; 
      padding:25px 50px; 
      text-align:center; 
      margin:auto; 
     } 

     .AgendaItemDiv 
     { 
      width: 700px; 
      height: 200px; 
      clear: both; 
     } 

      <!-- Agenda Item : speakers area --> 

      .SpeakersContainerDiv 
      { 
       float:left; 
       width: 200px; 
      } 

      .SpeakerItemDiv 
      { 
       float:left; 
       width:120px; 
       padding:2px 3px; 
       margin:0px; 
      } 

      .SpeakerImgDiv 
      { 
       border-style:solid; 
       border-width:1px; 
       width: 120; 
       height: 120; 
      } 

      .SpeakerMoreInfoDiv 
      { 
       width: 120; 
      } 
      <!-- Agenda Item : text area --> 
      .AgendaItemDetailsContainerDiv 
      { 
       float: right; 
       margin:0px; 
       padding:0px; 
      } 

      .AgendaItemTextDiv 
      { 
       floar: left; 
       position:relative; 
       margin:0px; 
       padding:0px; 
       height:auto; 
       right: 90px; 
      } 

      .AgendaItemTextDiv > span 
      { 
       padding-left:20px; 
      } 

      .AgendaItemrButtonsDiv 
      { 
       position:relative; 
       bottom: 0px; 
      } 

HTML：

<div class="AgendaItemsContainerDiv"> 
    <!-- Agenda items container div--> 

     <div class="AgendaItemDiv"> 
     <!-- Agenda item div --> 

      <div class="SpeakersContainerDiv"> 
      <!-- Agenda speakers container div --> 

       <div class="SpeakerItemDiv"> 
        <!-- Speakers item div --> 
        <div class="SpeakerImgDiv"> 
         <!-- Speaker img div --> 
         Speaker 1 Image here 

        </div> 
        <div class="SpeakerMoreInfoDiv"> 

         Speaker info 

        </div> 
       </div> 

       <div class="SpeakerItemDiv"> 
        <!-- Speakers item div --> 
        <div class="SpeakerImgDiv"> 
         <!-- Speaker img div --> 
         Speaker 2 Image here 

        </div> 
        <div class="SpeakerMoreInfoDiv"> 

         Speaker info 

        </div> 
       </div> 

      </div> 

      <div class="AgendaItemDetailsContainerDiv"> 
      <!-- Agenda desc container div --> 

       <div class="AgendaItemTextDiv"> 
        <!-- Agenda header and details div --> 
        <h2> 
         Topic title here 
        </h2> 
        <span> 
         Details about this topic 
        </span> 
        <div> 
         Time, from: 10:15 to 10:30 
        </div> 

       </div> 

       <div class="AgendaItemrButtonsDiv"> 
        <!-- Click for more info div --> 
        More Info... 
       </div> 

      </div> 

     </div> 

    </div> 

我不能」弄清楚我的代碼有什麼問題，我搜索了，並嘗試了很多場景。但結果相同。

如果我試圖編輯我的CSS從瀏覽器設置寬度或浮動，divs變得瘋狂！

Answer 1

我真的不明白你想達到什麼目的，但如果你正在嘗試做的是浮動AgendaItemDetailsContainerDiv到右側，按下面的CSS聲明...

<!-- Agenda Item : text area --> 
.AgendaItemDetailsContainerDiv 
{ 
     float: right; 
     margin:0px; 
     padding:0px; 
    } 

你只需必須刪除您在CSS類聲明之上添加的文本，因爲它不是正確的CSS註釋。這就是風格不適用的原因。您可以使用適當的CSS的註釋塊如下...

/* Agenda Item : text area */ 
.AgendaItemDetailsContainerDiv 
{ 
    float: right; 
     margin:0px; 
     padding:0px; 
    } 

這同樣適用於所有其他的格式不正確的評論在您的CSS樣式表