コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 間違った div 位置_html/css_WEB-ITnose

間違った div 位置_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 12:16:29
オリジナル
1311 人が閲覧しました

私の当初の意図は、上の 2 つを並べて、3 つ目を下に置くことでした

左部分
;
右側の部分
-body{
width:900px;
margin:0px;自動;
パディング:0;
}
div.left{
width:600px;
height:600px;
float:left:0px;

表示される場合、最初の値は常に一定の距離になります。左から2番目が配置できないようにすると、下に表示されます


ディスカッションへの返信(解決策)


青い部分が左側、黒い部分が本体です。青は左側ではないでしょうか？ ? ? ? ?

レイアウトを制御するためにテーブルを使用して、div がテーブルに埋め込まれていないのはなぜですか? 

<!DOCTYPE html><html><head><style>* {margin:0px;padding:0px}#page {width:900px;background:#ccc;margin:100px auto;}#left {width:450px;height:50px;background:blue;float:left;}#right {width:450px;height:50px;background:red;float:left;}#down {width:900px;background:green;height:50px;float:left;}</style></head><body><div id="page"><div id="left">left</div><div id="right">right</div><div id="down">down</div></div></body></html>
ログイン後にコピー

div.main-body{width:900px;height:900px;background:#6F9;margin:0px auto;padding:0;}div.left{width:600px;height:600px;background:#00F;float:left;margin-left:0px;}div.right{width:300px;height:600px;background:red;float:left;margin-left:0px;}
ログイン後にコピー

css 最初のステップは、レイアウトと位置の問題に遭遇したとき、それをリセットすることです

絶対を統合し、最後に相対を含めることをお勧めします。これが最も簡単です。最も直感的な方法は、単に top、left、right、bottom: を使用することです。

関連ラベル：
div位置不对
ソース：php.cn
前の記事：html5 Canvas_html/css_WEB-ITnose でタイトルと影を描画する 次の記事：button_html/css_WEB-ITnose の 12 の状態
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
Android 上の React-Native でステータス更新が機能しない スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2...
から 2024-04-06 16:54:10
0
1
410
内部クエリに Eloquent を使用する 画像アドレスには、場所とユーザーの総数が含まれています。 Users::with(['address'=>function($query){$query->where(...
から 2024-04-06 16:45:50
0
1
515
0ms スリープを省略すると CSS トランジションが中断されるのはなぜですか? FLIP アニメーションを実装して、正しく理解できているかどうかを確認しようとしています。このコードペン (間違ったコードですみません。ただいじっているだけです) で、sleep ...
から 2024-04-06 16:29:50
0
2
490
Imagick、Adobe Photoshop、Windows の比較 - 解像度の検出 (1 センチメートルあたりのピクセル数またはインチあたりのピクセル数) これは質問ではなく、DPI がさまざまなファイル形式でどのように保存されるかについての理解を深め、なぜ DPI が機能するのかを議論する試みです。私は画像 (JPG、PNG、Tif...
から 2024-04-06 16:01:27
0
1
397
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート