如何在重新調整大小時使它們不移動？

我希望我的網站能夠全部分辨率友好，所以一切都以中心爲中心，當我縮小窗口時，它全部向左移動並停止。不過，當我縮小窗口時，我的新聞Feed會降低到投票數以下。如何在重新調整大小時使它們不移動？

繼承人的CSS代碼：

#poll { 
float: left; 
margin: 0px 20px; 
} 

#newsfeed { 
float: right; 
margin: 0px 20px; 
} 

<div id="poll"> 
<form method="post" action="http://poll.pollcode.com/t78ar8"><table border=0 width="244" bgcolor="EEEEEE" cellspacing="2" cellpadding="0"><tr><td colspan="2" height="10"><font face="Tahoma" size="2" color="000000"><b>What game site do you visit most?</b></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="1" id="t78ar8answer1"></td><td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer1">Ign</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="2" id="t78ar8answer2"></td><td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer2">GameSpot</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="3" id="t78ar8answer3"></td><td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer3">GameFAQs</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="4" id="t78ar8answer4"></td><td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer4">GamerZone</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="5" id="t78ar8answer5"></td><td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer5">Mmohut</label></font></td></tr><tr><td colspan="2" height="10"><center><input type="submit" value=" Vote ">&nbsp;&nbsp;<input type="submit" name="view" value=" View "></center></td></tr></a>&nbsp;</font></td></tr></table></form> 

    </div> 
    <div id="newsfeed"> 
    <!-- start sw-rss-feed code --> 
    <script type="text/javascript"> 
    <!-- 
    rssfeed_url = new Array(); 
    rssfeed_url[0]="http://news.yahoo.com/rss/gaming"; 
    rssfeed_frame_width="500"; 
    rssfeed_frame_height="720"; 
    rssfeed_scroll="on"; 
    rssfeed_scroll_step="6"; 
    rssfeed_scroll_bar="on"; 
    rssfeed_target="_blank"; 
    rssfeed_font_size="14"; 
    rssfeed_font_face=""; 
    rssfeed_border="on"; 
    rssfeed_css_url="http://udel.edu/~ssell/newsfeed.css"; 
    rssfeed_title="on"; 
    rssfeed_title_name=""; 
    rssfeed_title_bgcolor="#3366ff"; 
    rssfeed_title_color="#fff"; 
    rssfeed_title_bgimage="http://"; 
    rssfeed_footer="off"; 
    rssfeed_footer_name="rss feed"; 
    rssfeed_footer_bgcolor="#fff"; 
    rssfeed_footer_color="#333"; 
    rssfeed_footer_bgimage="http://"; 
    rssfeed_item_title_length="50"; 
    rssfeed_item_title_color="#666"; 
    rssfeed_item_bgcolor="#fff"; 
    rssfeed_item_bgimage="http://"; 
    rssfeed_item_border_bottom="on"; 
    rssfeed_item_source_icon="off"; 
    rssfeed_item_date="off"; 
    rssfeed_item_description="on"; 
    rssfeed_item_description_length="120"; 
    rssfeed_item_description_color="#666"; 
    rssfeed_item_description_link_color="#333"; 
    rssfeed_item_description_tag="off"; 
    rssfeed_no_items="0"; 
    rssfeed_cache = "7872565d53aadc6c14b4ab1bb3f79bdb"; 
    //--> 
    </script> 
    <script type="text/javascript" src="rss-feed.js"></script> 
    <!-- end sw-rss-feed code --> 
    </div>

來源

2013-03-06 TheUnCola

請提供html。 http://jsfiddle.net也可能是好的或者是有問題的項目的鏈接。 – Jrod 2013-03-06 14:29:44

@Jrod感謝您的建議。爲什麼我的問題被拒絕了？ – TheUnCola 2013-03-06 14:33:59

最有可能是因爲它缺乏html，但我不能肯定地說，因爲我不是那個倒票的人。通過閱讀http://stackoverflow.com/questions/how-to-ask，你將不會有任何問題。 – Jrod 2013-03-06 15:16:28

，如果你不想使用自適應設計或相近開關一個簡單的解決方案：嘗試包裝容器「#poll」和「#newsfeed」與另一個包含以下CSS的容器（#wrapper）：

#wrapper { 
min-width:500px; /* 500px = max. sum of box model width values of #poll and #newsfeed" */ 
width: auto !important; /* IE>=7 */ 
width: 500px; /* IE<7 */ 
}

來源

2013-03-06 15:03:50

你能解釋一下嗎？我不明白響應式設計或類似開關是什麼。 – TheUnCola 2013-03-06 15:55:54

如果必須具有多個容器，並且在調整視口大小時不允許中斷，則需要在塊元素周圍指定固定寬度的包裝。 IE需要一點幫助。「響應式設計或類似的開關」我的意思是代碼，因爲使用客戶端javascript，條件註釋或CSS媒體查詢，在客戶端呈現不同的代碼。 – 2013-03-07 09:32:56

我試過，但它沒有工作 – TheUnCola 2013-03-08 03:20:27

給你的div容器一個最小寬度和最大寬度可能會解決這個問題。
確保您的投票&新聞源寬度與您的保證金相結合不超過您的容器的最小寬度。

例子：

HTML：

<div id="container"> 
<div id="poll"> </div> 
<div id="newsfeed"> </div> 
</div>

CSS：

#container { 
max-width:1240px; 
min-width:600px; 
} 
#poll { 
float:right; 
max-width:620px 
min-width:280px; 
margin:0 20px; 
} 
#newsfeed { 
float:left; 
max-width:620px; 
min-width:280px; 
margin:0 20px; 
}

來源

2013-03-06 14:41:19 Jefferson

在較低分辨率下，新聞Feed仍低於投票率。 – TheUnCola 2013-03-06 18:45:36

如何在重新調整大小時使它們不移動？

回答

相關問題