Сожмите DIV между двумя другими дивами, когда окно изменяет размер

Question

У меня есть следующий код:

HTML:

<div class="main"> 
    <div class="myClass1"> 
    </div> 
    <div class="myClass2"> 
    </div> 
    <div class="myClass3"> 
    </div> 
    <div class="myClass4"> 
    </div> 
</div> 

CSS:

.main { 
    width:100%; 
    height:100px; 
    background-color:#000; 
} 

.myClass1 { 
    height: 100px; 
    width:200px; 
    background-color: blue; 
    display: inline-block; 
} 

.myClass2 { 
    height: 100px; 
    width:200px; 
    background-color: yellow; 
    display: inline-block; 
} 

.myClass3 { 
    height: 100px; 
    width:200px; 
    background-color: red; 
    display: inline-block; 
} 

.myClass4 { 
    height: 100px; 
    width:200px; 
    background-color: yellow; 
    display: inline-block; 
} 

JSFiddle: http://jsfiddle.net/a2whdvmw/

Я хочу все они выровнены справа от main, но по мере изменения размера окна, на некоторых точка myClass1 достигнет левого края main, и я хочу myClass3 сжать между myClass2 и myClass4 с этого момента.

myClass1, myClass2 и myClass4 все фиксированный размер. Поэтому, когда я изменяю размер окна, единственной шириной, которую я хочу изменить, является одна из myClass3.

Можно ли это сделать только с помощью CSS?

Answer 1

Используйте гибкий макет.

Укажите flex: 0 1 200px для вашего .myClass3. Это приведет к тому, что он не вырастет, но все же позволит сократить изгибную ширину 200px. Для остальных укажите flex: 0 0 200px, чтобы запретить как расширение, так и сокращение, эффективно фиксируя их на 200px, так как .myClass3 сжимается с уменьшением свободного места.

Demo Fiddle: http://jsfiddle.net/abhitalks/a2whdvmw/1/

Demo Отрывок:

.main { width:100%; height:100px; background-color:#000; display: flex;} 
 

 
.myClass1 { 
 
    flex: 0 0 200px; 
 
    height: 100px; background-color: blue; 
 
} 
 

 
.myClass2 { 
 
    flex: 0 0 200px; 
 
    height: 100px; background-color: yellow; 
 
} 
 

 
.myClass3 { 
 
    flex: 0 1 200px; 
 
    height: 100px; background-color: red; 
 
} 
 

 
.myClass4 { 
 
    flex: 0 0 200px; 
 
    height: 100px; background-color: yellow; 
 
}

<div class="main"> 
 
    <div class="myClass1"></div> 
 
    <div class="myClass2"></div> 
 
    <div class="myClass3"></div> 
 
    <div class="myClass4"></div> 
 
</div>

Answer 2

Попробуйте медиа-запрос ..

@media only screen and (max-width: 1200px){ 
    .myClass3{ 
    width:10%; 
    } 
} 

Надеется, что это помогает .. Максимальной ширине и ширине (%) может быть изменение ..