0

私は自分のウェブサイトをすべて解像度に優しいものにしたいので、すべてが中央に表示され、ウィンドウを縮小するとすべてが左に移動して停止します。ただし、ウィンドウを縮小すると、ニュース フィードが投票数を下回ります。

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>
4

2 に答える 2

1

レスポンシブデザインや同様のスイッチを使用したくない場合の簡単な解決策の1つ：次のCSSを使用して、コンテナー「#poll」と「#newsfeed」を別のコンテナー（#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-06T15:03:50.163 に答える
0

コンテナー 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-06T14:41:19.283 に答える