ホームページ > 記事 > ウェブフロントエンド > DIV+CSS レイアウトの問題_html/css_WEB-ITnose
DIV+CSS レイアウトの問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:26:231148ブラウズ
ページには大きな div があり、この大きな div には 3 つの小さな div があり、最初の div は左揃え、3 番目の div は右揃え、2 番目 (つまり中央) の div は中央揃えになります。それを達成するにはどうすればよいでしょうか?左の div と右の div の幅と高さは固定されています。重要なのは、中央の div の幅が固定されていないということです。
前提条件は次のとおりです: 大きな div の幅は固定幅: 100% ではありません。
下の図では、左側の返された画像は左揃えであり、右側の 3 つの点は右揃えであり、「統合」中央の「center」は中央に配置されます。実装するには3つのdivを使用します。左右のdivは固定幅で、それぞれ左側と右側に一時停止されます。中央のdivはどうですか？中心に置くにはどうすればよいでしょうか？
ディスカッションへの返信 (解決策)
中央の div; float:left; 属性に margin:0 auto を追加すると、float を削除しても意味がありません。 left 属性を使用すると便利ですが、float:left を削除すると、3 つの div が同じ行に配置されなくなります。
中央に大きな div を使用し、両側の div を両方に固定するには絶対配置を使用します。
中央の div に margin:0 auto; を追加します。
そうすれば、3 階で述べたように絶対に配置されます
。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.div1{width:100%;line-height:50px;background:#FFC}.left{float:left;width:100px;background:#9C6}.right{float:right;width:100px;background:#0CF}.center{text-align:center;}</style><script type="text/javascript"></script></head><body> <div class="div1"> <div class="left">左侧</div> <div class="right">右侧</div> <div class="center">积分中心</div> </div></body></html> <style type="text/css">*{margin:0;padding:0}.box{position:relative;height:50px;background:#fafafa}.center{text-align:center;height:50px;line-height:50px}.left,.right{position:absolute;background:#f00;width:50px;height:30px;top:10px}.left{left:0}.right{right:0}</style> <div class="box"> <div class="left">左</div> <div class="center">中</div> <div class="right">右</div></div>
中心にパディングを追加するのが最善です: 0 60px;
そうしないと、中心のコンテンツが左から右に隠れてしまいます
<style type="text/css">*{margin:0;padding:0}.box{position:relative;height:50px;background:#fafafa}.center{text-align:center;height:50px;line-height:50px;background:yellow;padding:0 70px;}.left,.right{position:absolute;background:#f00;width:50px;height:30px;top:10px}.left{left:0}.right{right:0}</style> 皆さんありがとう、解決しました
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。