ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS修正、元の1列を2列に変更する方法_html/css_WEB-ITnose
CSS修正、元の1列を2列に変更する方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:23:001114ブラウズ
<style type="text/css"> #vote-show{ border:1px solid #e5e5e5; padding:0 1px; color:#535353}#vote-show h2{background:url("{IMG_PATH}vote/show_bg.png") repeat-x 0 0;height:26px; line-height:26px; padding-left:10px}#vote-show h2 span{font-size:14px;background:url("{IMG_PATH}vote/vote_bg.gif") no-repeat scroll 0 1px transparent;padding-left:18px; color:#145aa3; }#vote-show h3{ font-size:12px; font-weight:normal; line-height:26px; height:26px}#vote-show .content{ padding:8px 10px 15px}.vote_bar{width:50%; height:13px; border:1px solid #999; position:relative; overflow:hidden; margin-bottom:8px; background-color:#f6f6f7}.vote_bar div{background: url({IMG_PATH}admin_img/x_bg.png) repeat-x left -194px; float: left; position:relative; height:16px;_height:13px}.vote_bar span{display:block; position:absolute; left:0; top:0; width:50%; text-align:center; height:16px; font-size:10px; line-height:12px; vertical-align:middle; z-index:200}</style> 画像効果を実現するための変更方法を教えてください ありがとうございます
ディスカッションへの返信 (解決策)
float、width
もともと、あなたのものは 1 つの列の場合、div を使用してフレームをフレーム化し、幅を 50% に設定し、その隣に div を追加します。これは 2 番目の列ですが、もう 1 つの div幅は 50%、float: right です。
サイズフロートを修正: 左にすると、自動的に配置されます
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。