полная ширина веб-страница

Question

Я пытаюсь веб-страницы с 3 секции вместе:

1. Div A ширина: 200px
2. DIV B полная ширина
3. ДИВ ширина C: 10px;

HTML:

<div class="main"> 
    <div class="a">A</div> 
    <div class="b">B</div> 
    <div class="c">C</div> 
</div> 

CSS:

.main{ 
    min-width: 1200px; 
    height: 100%; 
    width: 100%; 
    background-color:#F00; 
} 

.a{ 
    width:200px; 
    height:500px; 
    background-color:#0F0; 
    float:left; 
} 

.b{ 
    height:500px; 
    background-color:#00F; 
    float:left; 
} 

.c{ 
    width:10px; 
    height:500px; 
    background-color:#FF0; 
    float:left; 
} 

Но ДИВ B не на весь экран Как это исправить!?

Answer 1

Вы должны реорганизовать свой <div>. Во-первых <div class="a">, то <div class="c">, то <div class="b">:

<div class="main"> 
    <div class="a">A</div> 
    <div class="c">C</div> 
    <div class="b">B</div> 
</div> 

В качестве следующего шага, вы должны удалить float: left; из .b (что делает элементы плавать удаляет типичное поведение элемента уровня блока захвата доступную ширину) и изменить float для .c вправо.

Последний шаг должен состоять в том, что вам придется назначить ширину, которую вы хотите для всех 3, в их контейнер .main.

Answer 2

.b 
{ 
background-color:#00F; 
float:left; 
height:500px; 
min-width: 990px; /* 1200 -200-10*/ 
} 

Answer 3

Думаю, вам понадобится css lib, например, bootstrap и т. Д. Или используйте медиа-запросы.

Для исправления широка CSS будет выглядеть

.main{ 
    min-width: 1200px; 
    height: 100%; 
    width: 100%; 
    background-color:green; 
} 

.a{ 
    width:200px; 
    height:500px; 
    background-color:#0F0; 
    display:inline-block; 
    float:left; 
} 

.b{ 
    height:500px; 
    background-color:#0F0; 
    display:inline-block; 
    width:990px; 
} 

.c{ 
    width:10px; 
    height:500px; 
    background-color:#FF0; 
    display:inline-block; 
    float:right; 
}