2016-07-01 4 views
0

Hey ich habe Wrapper und Container, die ich auf 2 Seiten teilen, links und rechts. Ich kann keine Farben, Hintergründe, Schriftarten oder irgendetwas zur rechten Seite hinzufügen. Ist das ein guter Weg, dieses Problem zu lösen, oder sollte ich etwas anderes machen? Und wenn Sie wissen, wie Sie es beheben können, lassen Sie es mich wissen, ich habe versucht, es zu benutzen, wichtig, aber es funktioniert nicht. Hinzufügen jsfiddle und Code:linke und rechte Seite Container kann nicht richtig ändern

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

könnten Sie bitte genau erklären, was Sie brauchen? – vignesh

+0

@vignesh Ich möchte den Hintergrund von .rightbox.color-box ändern – swipeales

Antwort

1

ändern Sie Ihre Wähler von .rightbox.color-box zu .rightbox .color-box

CSS Selectors

1

Sie müssen CSS-Standards folgen. Wenn Sie .rightbox.color-box schreiben bedeutet dies, sowohl die Klassen gibt es in gleichen div aber hier versuchen Sie .color-box Ziel, die Kinder von .rightbox ist so müssen Sie Raum zwischen den beiden Klassen geben

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>

kurze Lesen Sie mehr über CSS-Selektoren here

1

Bitte fügen Sie diesen Code

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

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