중간 div 너비를 유지하면서 화면에 맞게 왼쪽/오른쪽 div 태그 폭을 자동 조정하는 방법

안녕하세요 div 'one'과 div 'three'auto를 div 'two'width를 유지하면서 화면에 맞게 자동 조정하는 방법 정적 CSS에서? 세 개의 div는 모두 같은 행에 있어야합니다.중간 div 너비를 유지하면서 화면에 맞게 왼쪽/오른쪽 div 태그 폭을 자동 조정하는 방법

내 HTML은 다음과 같습니다.

<html> 
<header<title></title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
<div id="x"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> 
</div><!-- close div 'x' --> 
</body> 
</html>

그리고 지금까지 수행 된 CSS는 다음과 같습니다.

#x {height:34px; border:1px solid gray;} 
#one {height:30px; border:1px solid red;; width:auto; float:left;} 
#two {height:30px; border:1px solid green; width:660px; float:left;} 
#thr {height:30px; border:1px solid blue; width:auto; float:left;}

모든 의견을 크게 높이세요. 감사합니다

출처

2012-10-07 Amw Amw

먼저 ID와 일치하는지 확인하십시오. thr은 three과 다릅니다.

내가 CSS에 수행 한 변경 :

들여 쓰기가. 좋은 습관입니다.
div의 너비를 부모 div 크기의 백분율로 선언하십시오. 당신은 너비를 전혀 선언하지 않았습니다.
추가 padding 조금, 3 명 내부 div의이 외부 DIV 여기

의 중심에 체류하는 CSS 그래서 :

#x 
{ 
    position:relative; 
    padding:1.5px; 
    height:34px; 
    border:1px solid gray; 
} 
#one 
{ 
    height:30px; 
    border:1px solid red; 
    width:33%; 
    float:left; 
} 
#two 
{ 
    height:30px; 
    border:1px solid green; 
    width:33%; 
    float:left; 
} 
#three 
{ 
    height:30px; 
    border:1px solid blue; 
    width:33%; 
    float:left; 
}

출처

2012-10-07 06:49:32 tarunuday

그는 정적 인 div 2가 필요합니다. :) –

당신이 My Fiddle

처럼 그것을 할 수 있습니다 HTML

<div class="container"> 
<div class="first"></div> 
<div class="static"></div> 
<div class="third"></div> 
</div>

CSS

.container { 
    display:-webkit-box; 
    -webkit-box-orient:horizontal; 
    -webkit-box-align:stretch; 
    display:-moz-box;  
    -moz-box-orient:horizontal; 
    -moz-box-align:stretch; 
    display:box; 
    box-orient:horizontal; 
    box-align:stretch; 
    color: #ffffff;  
}  

div { 
    height: auto; 
} 

.first { 
    background-color: #546547; 
} 

.static { 
    background-color: #154d67; 
    width: 660px; 
} 

.third { 
    background-color: #c00000; 
} 

.first, .third { 
    -webkit-box-flex:1.0; 
    -moz-box-flex:1.0; 
    box-flex:1.0; 
}

출처

2012-10-07 06:54:51

중간 div 너비를 유지하면서 화면에 맞게 왼쪽/오른쪽 div 태그 폭을 자동 조정하는 방법

답변

관련 문제