Изменение ширины окна в CSS

Question

У меня возникли проблемы с некоторым содержимым, которое не было зафиксировано в одном месте, когда я изменяю размер окна в браузере, у меня в основном есть 3 элементы окна, расположенные рядом друг с другом.

Они расположены хорошо, однако, когда я изменяю размер экрана, они, кажется, падают ниже друг друга.

У меня есть min-width: 947px; в теле CSS, однако это ничего не делает.

HTML:

<div id ="featured1"> 

</div> 

<div id ="featured3"> 

</div> 

<div id ="featured2"> 

</div> 

CSS:

#featured1{ 


float:left; 
font-family: 'Lobster13Regular'; 
font-size:35px; 
color:#9c5959; 
margin-top:20px; 
margin-left:150px; 
border:1px solid black; 
width:250px; 
height:150px; 

} 

#featured2 { 

display: inline-block; 
font-family: 'Lobster13Regular'; 
font-size:35px; 
color:#9c5959; 
margin-top:20px; 
border:1px solid black; 
width:250px; 
height:150px; 
} 

#featured3 { 
float:right; 
font-family: 'Lobster13Regular'; 
font-size:35px; 
color:#9c5959; 
margin-top:20px; 

border:1px solid black; 
width:250px; 
height:150px; 
margin-right:200px; 

} 

По какой-то причине, когда я пытаюсь изменения размера экрана с этим кодом элементы падают ниже друг друга, я ищу содержание полностью остаются то же самое и не изменять размер вообще.

Answer 1

Вот рабочий пример: jsFiddle link

использование

display: inline-block; 

на всех 3 divs, то они не будут идти вниз. Примечание: это свойство не будет работать на IE7 и более мелких версиях.

Вы указали свое тело min-width:947px, но фактическая ширина занята всеми divs, включая границу и границы, и т. Д. 1150px. Вот почему его нарушение.

Пожалуйста, добавьте vertical-align: top; собственность на все дивы

Answer 2

Это должно помочь. FYI. При написании в CSS убедитесь, что вы уменьшите код. У разработчика Google есть отличный раздел по этому вопросу (https://developers.google.com/speed/pagespeed/service/MinifyCSS).

HTML:

<div id="container"> 
    <div id="featured1"> 
     Featured 1 
    </div> 
    <div id="featured2"> 
     Featured 2 
    </div> 
    <div id="featured3"> 
     Featured 3 
    </div> 
</div> 

CSS:

#container { 
    position: absolute; 
    width: 836px; 
    height: 190px; 
    } 
#featured1, #featured2, #featured3 { 
    position: relative; 
    font-family: 'Lobster13Regular'; 
    font-size: 35px; 
    float: left; 
    left: 20px; 
    top: 20px; 
    width: 250px; 
    height: 150px; 
    border: 1px solid #000; 
    overflow: hidden; /*Remove if you are not going to overflow text in each element*/ 
    } 
#featured2, #featured3 { 
    margin-left: 20px; 
    }