CSS 창 너비 크기 조정 문제

Question

브라우저의 창 크기를 조정할 때 일부 콘텐츠가 한 곳으로 고정되지 않는 문제가 있습니다. 기본적으로 3 개의 div id 상자 요소가 옆에 배치되었습니다.

화면의 크기를 조정할 때 위치가 잘 맞지만 서로 아래로 떨어지는 것처럼 보입니다.

나는 CSS 본문에 min-width: 947px;을 가지고 있습니다. 그러나 이것은 아무 것도하지 않습니다.

는 HTML :

는 CSS

<div id ="featured1"> 

</div> 

<div id ="featured3"> 

</div> 

<div id ="featured2"> 

</div> 

: 나는 요소가 서로를 하회이 코드와 화면 크기를 조정하려고 어떤 이유로

#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; 

} 

, 나는에 대한 내용을 찾고 완전히 남아 동일하고 전혀 크기를 조정하지 않습니다. 그들은 늘 아래로 이동 jsFiddle link

사용 3 divs에

display: inline-block; 

: 여기

Answer 1

은 작업 예입니다. 참고 :이 속성은 IE7 이하 버전에서는 작동하지 않습니다.

신체에 min-width:947px을 지정했지만 실제 너비는 모두 divs (여백 및 테두리 포함)이 1150px입니다. 그게 왜 찢어 지는지 .

이 도움이 될

Answer 2

모든 div의에 vertical-align: top; 속성을 추가하십시오. 참고하시기 바랍니다. 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; 
    }