창의 크기를 줄이려면 div를 얻으려고 시도하십시오.

Question

지금 바보처럼 느껴집니다. 어쨌든 - 페이지에는 세 개의 열이 있습니다. 오른쪽과 왼쪽은 고정 너비이므로 그대로 있어야합니다. 브라우저 창 크기를 조정할 때 가운데 열의 크기를 조정해야합니다. 나도 알아,이 힘들지 않을 거라는 걸 알지만, 그것은 단지 나를 위해 일어나지 않습니다. Heres는 html로 :

<div class="bottom_content"> 

<div class="left_col"> 

<p>Keeping up with Commpro.Biz</p> 

<div class="s_n_icons"> 

<img src="images/facebook.png" alt="facebook" /> 

<img src="images/flickr.png" alt="flickr" /> 

<img src="images/twitter.png" alt="twitter" /> 

<img src="images/youtube.png" alt="youtube" /> 

</div> 

<p>User Name:<input ="text" size="20" name="username" value="" /></p> 

<p>Password:<input ="text" size="20" name="password" value="" /></p> 

<input type="button" value="submit" name="submit" /> 

<p><a href="#">Forgot Username or Password?</a> 

<p>Click <a href="#">here</a> to sign up to receive the Commpro.Biz newsletter.</p> 

<div id="twitter"></div> 

</div> 

<div class="center_col"> 

<p>What's Hot on Commpro.Biz</p> 

<div class="hot_item"> 
hot item hot item hot item hot item hot item hot item hot itemhot item hot item 
</div> 

</div> 

<div class="right_col"> 

<p>Our Partners</p> 

<img src="images/BW.jpg" alt="Warren Buffett" /> 

<img src="images/IR_PRNewswire.gif" alt="newswire" /> 

<img src="images/Sysomo.gif" alt="Sysomo" /> 

</div> 

<div id="footer"> 
    <p>Copyright 2011 by CommproBiz</p> 
</div> 
</div> 

와 무슨 일이 일어나고 무엇 .CSS

.left_col{ 
float:left; 
width:190px; 
height:auto; 
padding-right:5px; 
} 

.center_col{ 
float:left; 
width:auto; 
padding:0 10px; 
} 

.hot_item{ 
width:auto; 
background-color:red; 
} 

.hot_item a{ 
text-decoration:none; 
} 

.hot_item img{ 
float: right; 
vertical-align: top; 
} 

.right_col{ 
float:right; 
width:250px; 
height:auto; 
padding-left:5px; 
} 

.right_col img{ 
margin:5px; 
} 

는 센터 COL에 약간의 내용과 함께 세 개의 열이 행동한다는 것입니다. 일정량의 내용이 들어가면 왼쪽 열 아래로 떨어지고 오른쪽 열은 아래로 떨어집니다.

Answer 1

요소를 부양하는 경우 너비를 지정해야합니다. 그렇지 않으면 브라우저가 작동해야하는 지정된 방법이 없기 때문에 모든 브라우저가 다르게 작동 할 수 있습니다.

당신이 할 수있는 것은 열에 너비를 퍼센트로 부여하는 것입니다. 왼쪽은 10 % 가운데 70 % 및 오른쪽 20 %입니다.

왼쪽 및 오른쪽으로 고정 너비가 필요한 경우. 오른쪽 열의 html을 center-col 위에 놓아야합니다. 그런 다음 CSS에서 float을 center-col에서 제거하고 여백을 남겨 둡니다. 왼쪽 : 195px; margin-right : 255px;

Answer 2

왼쪽 사이드 바 아래에서 저작권 정보를 낮추기 위해 clear:both; 속성을 사용했으며 페이지가 콘텐츠로 채워지면 저작권이 감소합니다.

<div class="bottom_content"> 
<div class="left_col"> 
<p>Keeping up with Commpro.Biz</p> 
<div class="s_n_icons"> 
<img src="images/facebook.png" alt="facebook" /> 
<img src="images/flickr.png" alt="flickr" /> 
<img src="images/twitter.png" alt="twitter" /> 
<img src="images/youtube.png" alt="youtube" /> 
</div> 
<p>User Name:<input ="text" size="20" name="username" value="" /></p> 
<p>Password:<input ="text" size="20" name="password" value="" /></p> 
<input type="button" value="submit" name="submit" /> 
<p><a href="#">Forgot Username or Password?</a> 
<p>Click <a href="#">here</a> to sign up to receive the Commpro.Biz newsletter.</p> 
<div id="twitter"></div> 
</div> 
<div class="right_col"> 
<p>Our Partners</p> 
<img src="images/BW.jpg" alt="Warren Buffett" /> 
<img src="images/IR_PRNewswire.gif" alt="newswire" /> 
<img src="images/Sysomo.gif" alt="Sysomo" /> 
</div> 
<div class="center_col"> 
<p>What's Hot on Commpro.Biz</p> 
<div class="hot_item">hot item hot item hot item hot item hot item hot item hot itemhot item hot item</div> 
</div> 
<div id="footer"> 
<p>Copyright 2011 by CommproBiz</p> 
</div> 
</div> 
</body> 

후 고정 CSS : 도움이

.left_col{ 
float:left; 
width:190px; 
height:auto; 
padding-right:5px; 
}.center_col{ 
margin-left:195px; 
margin-right:254px; 
width:auto; 
padding:0 10px; 
}.hot_item{ 
width:auto; 
background-color:red; 
}.hot_item a{ 
text-decoration:none; 
}.hot_item img{ 
float: right; 
vertical-align: top; 
}.right_col{ 
float:right; 
width:250px; 
position:relative; 
left:1px; 
padding-left:5px; 
}.right_col img{ 
margin:5px; 
}#footer{ 
clear:both; 
} 

희망

다음은 고정 HTML입니다!