2014-09-07 8 views
-1

Здравствуйте, я новый веб-разработчик. У меня есть простая проблема. Я пытаюсь использовать два столбца в div (.container width960px), один из них float: left (width: 300px), но когда другой использует float: right (width: 650px). Но когда я использую float right rightsbarbar, он не отображается в контейнере. Pleasr поможет мне правильно использовать поплавок: влево или вправо.О плавании влево и вправо

.container { 
    background: none repeat scroll 0 0 #000; 
    margin: 0 auto; 
    width: 960px; 
} 

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

.rightsidebar { 
    float: left; 
    width: 200px; 
    color: #fff; 
    width: 400px; 
} 
+2

Не могли бы вы предоставить фрагмент или пример проблемы? Мы не можем знать, что случилось, если мы ничего не увидим. –

+0

Вы можете использовать jsfiddle или http://plnkr.co/, чтобы показать свою проблему. Вы сказали, что не появилось. Вы имеете в виду, что это появляется, но не бок о бок? – masum7

+0

Я использую .container {background: none repeat scroll 0 0 # 000; margin: 0 auto; ширина: 960px;} и .leftsidebar {width: 200px; float: left} .rightsidebar {float: left; ширина: 200px; цвет: #fff; ширина: 400px;} правая боковая панель не отображается правильно. Он отображается на дне с цветом фона без цвета контейнера. –

ответ

0

Результат, который вы хотите, прост. Там не должно быть никаких проблем, проверить этот пример основан на вашем:

HTML

<div class="container"> 
    <div class="leftsidebar"> 
     Right Sidebar 
    </div> 
    <div class="rightsidebar"> 
     Right Sidebar 
    </div> 
    <div class="clear"></div> 
</div> 

CSS

.container { 
    background: none repeat scroll 0 0 #000; 
    margin: 0 auto; 
    width: 960px; 
} 

.leftsidebar { 
    width: 200px; 
    float: left; 
    background: yellow; 
} 

.rightsidebar { 
    float: left; 
    width: 760px; 
    background: green; 
} 

.clear { 
    clear: both; 
} 

jsFiddle Demo.

Смежные вопросы