2016-07-01 48 views
0

嘿,我有包裝和容器,我分兩邊,左,右。我無法在右側添加任何顏色,背景,字體或任何內容。這是解決這個問題的好方法,還是我應該做別的事情?如果你知道如何解決讓我知道,我嘗試使用!重要但它不工作。添加的jsfiddle和代碼:左側和右側容器不能更改權利

home {} #wrapper { 
 
    background-color: #FFFFFF; 
 
    padding: 15px; 
 
    overflow: auto; 
 
} 
 
#wrapper .leftbox { 
 
    float: left; 
 
    width: 63%; 
 
    padding: 12px; 
 
} 
 
#wrapper .rightbox { 
 
    float: right; 
 
    padding: 12px; 
 
    padding-right: 120px; 
 
} 
 
.rightbox.color-box { 
 
    height: 200px; 
 
    background-color: #2C2C2C; 
 
    font-size: 30px!important; 
 
}
<home> 
 
    <div class="container"> 
 
    <!-- wrapper--> 
 
    <div id="wrapper"> 
 
     <div class="leftbox"> 
 
     <h3>Welcome page</h3> 
 
     <p style="padding-top: 30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit posuere lobortis. Ut placerat vitae dolor vitae ultrices. Fusce tristique enim at lacus porta, sed dictum massa fermentum. Etiam a ullamcorper mi, vitae tristique lectus. 
 
      Sed ut finibus lectus, vel rutrum dui. Nullam vestibulum non tellus sit amet interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec aliquet, ex ut faucibus tempor, nulla tortor sollicitudin nunc, at feugiat nulla erat 
 
      nec magna. Nullam venenatis maximus nulla, eget blandit libero dignissim a. Maecenas et lorem sagittis, hendrerit metus ut, aliquet purus. Nunc tempor ultrices velit sit amet feugiat. Curabitur velit eros, bibendum in fermentum sed, mattis sit 
 
      amet sem. Maecenas sodales vehicula egestas.</p> 
 

 
     <p>Donec placerat molestie nunc quis malesuada. Vivamus sed ligula at dui blandit hendrerit et non sem. Ut mollis varius nisi, et pellentesque massa condimentum quis. Nulla at facilisis sem. Etiam mauris lorem, suscipit eget vulputate eu, cursus 
 
      ornare eros. Donec sit amet nibh id lectus feugiat egestas sed ut ligula. Fusce cursus ligula lectus, nec eleifend augue egestas sit amet.</p> 
 
     <p> 
 
      Proin arcu mauris, cursus vel est nec, condimentum mattis nunc. Curabitur in massa a dui vestibulum imperdiet non eu justo. Suspendisse porta, lectus ut porta vulputate, libero massa euismod massa, quis scelerisque dolor massa ut eros. In id dolor vitae 
 
      felis gravida lacinia. Cras vulputate turpis at elit placerat, ut aliquam elit mattis. Fusce ante est, volutpat sollicitudin eleifend ac, lobortis eu mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
      Cras sed maximus orci. Etiam pulvinar est metus, eget dapibus justo vehicula nec. Phasellus lectus magna, eleifend finibus nisi a, faucibus accumsan arcu. Nam sed ante pellentesque, sollicitudin quam eu, aliquet eros. Ut vehicula vestibulum 
 
      dui id sagittis. Suspendisse pharetra id dui nec egestas. Aliquam scelerisque pulvinar metus. In sagittis ornare commodo. 
 
     </p> 
 
     <p> 
 
      Curabitur in ipsum congue, ultricies nunc id, euismod eros. Vestibulum hendrerit augue libero, quis fermentum dui blandit vestibulum. Nulla pharetra volutpat dapibus. Ut tincidunt quam vel nunc iaculis rhoncus. Ut et egestas enim. Etiam a hendrerit neque. 
 
      Donec iaculis et sapien nec placerat. Phasellus lobortis, justo ac tempus posuere, nulla libero condimentum odio, fringilla vehicula metus ligula vel metus. Nunc vel quam quis turpis ultricies tempor. Nulla ac nibh massa. Aenean porta auctor 
 
      metus, vitae rhoncus mi iaculis sed. Vivamus pulvinar finibus urna, semper bibendum sem accumsan a. Etiam ac auctor elit, sit amet hendrerit velit. Sed volutpat ante neque, quis molestie purus pellentesque ut.</p> 
 
     <p>Integer ornare convallis nisl viverra mollis. Nullam ac massa a quam blandit ullamcorper. Nunc venenatis in dui eget faucibus. Fusce dapibus mauris sit amet magna gravida maximus. Duis condimentum, arcu non blandit placerat, nibh lorem fermentum 
 
      dui, et maximus enim enim at sem. Donec tempor lobortis justo vel sagittis. Donec auctor bibendum dignissim. Aenean id fringilla lorem. Etiam varius felis sed ligula tempus, vel sodales quam dignissim. Sed et posuere quam. Sed id libero et tellus 
 
      ultrices congue. Aenean commodo commodo consectetur. Curabitur ultricies non sem vitae hendrerit.</p> 
 
     <p>Aliquam erat volutpat. Sed tristique, est eget interdum scelerisque, tortor nibh vulputate lacus, in vehicula felis felis ut ligula. Phasellus sit amet finibus mauris. Cras gravida tincidunt finibus. Vivamus venenatis eros non felis rhoncus, vel 
 
      tempus nisl faucibus. Integer ac vulputate risus. Maecenas eget imperdiet lacus. Suspendisse bibendum, justo vel elementum accumsan, lorem magna tincidunt lorem, sit amet rutrum neque eros at nunc. Pellentesque habitant morbi tristique senectus 
 
      et netus et malesuada fames ac turpis egestas. Aliquam condimentum congue ante non commodo. Morbi a urna vitae magna sodales scelerisque. Fusce quam arcu, bibendum in erat vitae, pretium lacinia magna. Aliquam iaculis fermentum ultricies.</p> 
 
     <p> 
 
      Praesent sed felis at ligula euismod elementum sed a lectus. Curabitur scelerisque augue est. Suspendisse suscipit non turpis ut venenatis. Aliquam id interdum risus. Sed laoreet lorem tincidunt, sollicitudin elit elementum, fringilla leo. Fusce volutpat 
 
      nulla sed mauris interdum, eget lobortis magna congue. Vivamus condimentum neque quis commodo laoreet.</p> 
 
     </div> 
 
     <div class="rightbox"> 
 
     <div class="color-box"> 
 
      lol 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</home>

+0

請你解釋一下你究竟需要什麼? – vignesh

+0

@vignesh我想改變.rightbox.color-box的背景 – swipeales

回答

1

將您的選擇器從.rightbox.color-box.rightbox .color-box

CSS Selectors

1

您需要按照CSS標準。如果你寫.rightbox.color-box這意味着兩個類都出現在同一個div但在這裏你努力的目標.color-box這是.rightbox孩子,所以你需要兩個類

home {} #wrapper { 
 
    background-color: #FFFFFF; 
 
    padding: 15px; 
 
    overflow: auto; 
 
} 
 
#wrapper .leftbox { 
 
    float: left; 
 
    width: 63%; 
 
    padding: 12px; 
 
} 
 
#wrapper .rightbox { 
 
    float: right; 
 
    padding: 12px; 
 
    padding-right: 120px; 
 
    background: #ccc; 
 
    color: red; 
 
} 
 
.rightbox .color-box { 
 
    height: 200px; 
 
    background-color: #2C2C2C; 
 
    font-size: 30px!important; 
 
}
<home> 
 
    <div class="container"> 
 
    <!-- wrapper--> 
 
    <div id="wrapper"> 
 
     <div class="leftbox"> 
 
     <h3>Welcome page</h3> 
 
     <p style="padding-top: 30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit posuere lobortis. Ut placerat vitae dolor vitae ultrices. Fusce tristique enim at lacus porta, sed dictum massa fermentum. Etiam a ullamcorper mi, vitae tristique lectus. 
 
      Sed ut finibus lectus, vel rutrum dui. Nullam vestibulum non tellus sit amet interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec aliquet, ex ut faucibus tempor, nulla tortor sollicitudin nunc, at feugiat nulla erat 
 
      nec magna. Nullam venenatis maximus nulla, eget blandit libero dignissim a. Maecenas et lorem sagittis, hendrerit metus ut, aliquet purus. Nunc tempor ultrices velit sit amet feugiat. Curabitur velit eros, bibendum in fermentum sed, mattis sit 
 
      amet sem. Maecenas sodales vehicula egestas.</p> 
 

 
     <p>Donec placerat molestie nunc quis malesuada. Vivamus sed ligula at dui blandit hendrerit et non sem. Ut mollis varius nisi, et pellentesque massa condimentum quis. Nulla at facilisis sem. Etiam mauris lorem, suscipit eget vulputate eu, cursus 
 
      ornare eros. Donec sit amet nibh id lectus feugiat egestas sed ut ligula. Fusce cursus ligula lectus, nec eleifend augue egestas sit amet.</p> 
 
     <p> 
 
      Proin arcu mauris, cursus vel est nec, condimentum mattis nunc. Curabitur in massa a dui vestibulum imperdiet non eu justo. Suspendisse porta, lectus ut porta vulputate, libero massa euismod massa, quis scelerisque dolor massa ut eros. In id dolor vitae 
 
      felis gravida lacinia. Cras vulputate turpis at elit placerat, ut aliquam elit mattis. Fusce ante est, volutpat sollicitudin eleifend ac, lobortis eu mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
      Cras sed maximus orci. Etiam pulvinar est metus, eget dapibus justo vehicula nec. Phasellus lectus magna, eleifend finibus nisi a, faucibus accumsan arcu. Nam sed ante pellentesque, sollicitudin quam eu, aliquet eros. Ut vehicula vestibulum 
 
      dui id sagittis. Suspendisse pharetra id dui nec egestas. Aliquam scelerisque pulvinar metus. In sagittis ornare commodo. 
 
     </p> 
 
     <p> 
 
      Curabitur in ipsum congue, ultricies nunc id, euismod eros. Vestibulum hendrerit augue libero, quis fermentum dui blandit vestibulum. Nulla pharetra volutpat dapibus. Ut tincidunt quam vel nunc iaculis rhoncus. Ut et egestas enim. Etiam a hendrerit neque. 
 
      Donec iaculis et sapien nec placerat. Phasellus lobortis, justo ac tempus posuere, nulla libero condimentum odio, fringilla vehicula metus ligula vel metus. Nunc vel quam quis turpis ultricies tempor. Nulla ac nibh massa. Aenean porta auctor 
 
      metus, vitae rhoncus mi iaculis sed. Vivamus pulvinar finibus urna, semper bibendum sem accumsan a. Etiam ac auctor elit, sit amet hendrerit velit. Sed volutpat ante neque, quis molestie purus pellentesque ut.</p> 
 
     <p>Integer ornare convallis nisl viverra mollis. Nullam ac massa a quam blandit ullamcorper. Nunc venenatis in dui eget faucibus. Fusce dapibus mauris sit amet magna gravida maximus. Duis condimentum, arcu non blandit placerat, nibh lorem fermentum 
 
      dui, et maximus enim enim at sem. Donec tempor lobortis justo vel sagittis. Donec auctor bibendum dignissim. Aenean id fringilla lorem. Etiam varius felis sed ligula tempus, vel sodales quam dignissim. Sed et posuere quam. Sed id libero et tellus 
 
      ultrices congue. Aenean commodo commodo consectetur. Curabitur ultricies non sem vitae hendrerit.</p> 
 
     <p>Aliquam erat volutpat. Sed tristique, est eget interdum scelerisque, tortor nibh vulputate lacus, in vehicula felis felis ut ligula. Phasellus sit amet finibus mauris. Cras gravida tincidunt finibus. Vivamus venenatis eros non felis rhoncus, vel 
 
      tempus nisl faucibus. Integer ac vulputate risus. Maecenas eget imperdiet lacus. Suspendisse bibendum, justo vel elementum accumsan, lorem magna tincidunt lorem, sit amet rutrum neque eros at nunc. Pellentesque habitant morbi tristique senectus 
 
      et netus et malesuada fames ac turpis egestas. Aliquam condimentum congue ante non commodo. Morbi a urna vitae magna sodales scelerisque. Fusce quam arcu, bibendum in erat vitae, pretium lacinia magna. Aliquam iaculis fermentum ultricies.</p> 
 
     <p> 
 
      Praesent sed felis at ligula euismod elementum sed a lectus. Curabitur scelerisque augue est. Suspendisse suscipit non turpis ut venenatis. Aliquam id interdum risus. Sed laoreet lorem tincidunt, sollicitudin elit elementum, fringilla leo. Fusce volutpat 
 
      nulla sed mauris interdum, eget lobortis magna congue. Vivamus condimentum neque quis commodo laoreet.</p> 
 
     </div> 
 
     <div class="rightbox"> 
 
     <div class="color-box"> 
 
      lol 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</home>

之間給空間

關於css選擇器的簡介here

1

請添加以下代碼

#wrapper .leftbox { 
    float: left; 
    width: 50%; 
    padding: 0; 
} 

#wrapper .rightbox { 
    float: left; 
    padding: 0; 
    padding-right: 0; 
    background: #000; 
    width: 50%; 
}