DIV+CSS レイアウトの問題_html/css_WEB-ITnose-htmlチュートリアル-php.cn

中央の div; float:left; 属性に margin:0 auto を追加すると、float を削除しても意味がありません。 left 属性を使用すると便利ですが、float:left を削除すると、3 つの div が同じ行に配置されなくなります。

ホームページ

ウェブフロントエンド

htmlチュートリアル

DIV+CSS レイアウトの問題_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:26 PM

ページには大きな 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 つの小さな div を同じ行に追加する必要があるため、これは機能しません。 float:left 属性を削除すると、3 つの div が同じ行に配置されなくなります。 3 つの小さな div を同じ行に追加する必要があるため、中央の div に :0 auto; を追加することはできません。 float:left 属性は便利ですが、float:left 属性を削除すると、3 つの div は同じ行に配置されなくなります

そうすれば、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 までご連絡ください。