CSS浮動div繼承

我並排浮動兩個div。我無法設置左側div的屬性，因爲它們似乎是從正確的div繼承的。我猜我「米只是俯瞰東西在這裏，但我需要什麼做的，所以我他們不能被繼承？CSS浮動div繼承

div.main - content { 
 
    width: 1500 px; 
 
} 
 

 
div.left { 
 
    float: left; 
 
    width: 300 px; 
 
    overflow: hidden; 
 
    background - color: #ffffff; 
 
} 
 

 
table.; 
 
left { 
 
    border - collapse: collapse; 
 
    width: 300 px; 
 
} 
 

 
table.left, td { 
 
    border: 1 px hidden black; 
 
    padding: 5 px; 
 
    background - color: #ffffff; 
 
    color: #000000; 
 
} 
 

 
div.right { 
 
    float:right; 
 
    width:1200px; 
 
    overflow:hidden; 
 
} 
 

 
table.right { 
 
    border-collapse:collapse; 
 
    width:765px; 
 
} 
 

 
table.right, th { 
 
    border: 1px solid black; 
 
    padding:5px; 
 
    background-color:# df1e37; 
 
    color: #ffffff; 
 
} 
 

 
table.right, td { 
 
     border: 1 px dotted# cccccc; 
 
     padding: 5 px; 
 
     background - color: #ffffff; 
 
     color: #000000; 
 
}

<div class="main-content"> 
 
    <div class="left"> 
 
     <table class="left"> 
 
      <tr> 
 
       <td>Left content here</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 

 
    <div class="right"> 
 
     <table class=right> 
 
      <tr> 
 
       <td>Right content here</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div>

來源

2014-10-20 aantiix

我懷疑這是扔你; 'table.right，td'應該是'table.right td'，'table.left，td'應該是'table.left td'。假設你希望'td'的風格有所不同 – Turnip 2014-10-20 20:21:09

這是個問題，非常感謝！儘管這是一條評論，但現在一切正在運行，我不能選擇它作爲最佳答案。 – aantiix 2014-10-20 20:26:25

Btw +1代碼示例易於使用:)（SCCS ftw） – Ben 2014-10-20 20:26:45

table.;left應該table.left，對於初學者。另外，如@ 3rror404指出，在您選擇逗號可能並不意味着你在想什麼：

table.left, td

的意思是「left類table元素，也td個元素」，而

table.left td

的意思是「table元素的兒童td的」。

雖然分號改變後，但事情看起來不錯。你可能會考慮是否有可能改變並沒有給班在桌子上：

<div class="left"> 
    <table> 
     <tr><td>Left content here</td></tr> 
    </table> 
</div>

和訪問他們這樣說：

div.left table { ... }

或

div.left > table { ... }

...這IMO將消除未來混亂的可能來源。

來源

2014-10-20 20:21:58 Ben

有代碼中的幾個錯字

table.;left => .left table

和幾個類似......這裏是新片段

div.main-content { 
 
    width:1500px; 
 
} 
 

 
.left { 
 
float:left; 
 
width:500px; 
 
overflow:hidden; 
 
    background-color:rgba(123,123,123,0.1); 
 
} 
 

 
.left table { 
 
background-color: #feade2; 
 
border-collapse:collapse; 
 
width:300px; 
 
} 
 

 
.left table td { 
 
color:#000000; 
 
} 
 

 
.right { 
 
float:right; 
 
width:1000px; 
 
overflow:hidden; 
 
    background-color:rgba(200,200,200,0.3); 
 
} 
 

 
.right table { 
 
border-collapse:collapse; 
 
width:765px; 
 
} 
 

 
.right table th { 
 
border: 1px solid black; 
 
padding:5px; 
 
color:#ffffff; 
 
} 
 

 
.right table td { 
 
background-color:blue; 
 
color:red; 
 
}

<div class="main-content"> 
 
    <div class="left"> 
 
     <table> 
 
      <tr><td>Left content here</td></tr> 
 
     </table> 
 
    </div> 
 

 
    <div class="right"> 
 
     <table> 
 
      <tr><td>Right content here</td></tr> 
 
     </table> 
 
    </div> 
 
</div>

我加了一些顏色來區分各種邊界......你可以按照你想要的方式改變CSS。

你也不需要div.left或div.right。只需使用.left或.right，然後只需在div上指定類...該表將繼承div的類。希望這可以幫助

來源

2014-10-20 20:38:11 Sai

CSS浮動div繼承

回答

相關問題