2

私は、WYIWYG 機能を提供する Web Tools Platform を使用して Eclipse で作業しています。2 つの -containers が同じ行に表示されないという問題が発生しました。本当に奇妙なことは、ファイルをデスクトップにエクスポートしてブラウザで開くと、2 つのコンテナが並んで表示されますが、余白がないことです。なぜ2つの異なる外観があるのですか？つまり、Eclipse プラグインがうまく動作しない可能性がありますが、遅くともブラウザでファイルを開くと、コードが表示されるはずですか?

ここに私が説明したいことの2つの写真があります：

ここに画像の説明を入力

ここに画像の説明を入力

ここにhtmlファイルがあります：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="mainStyle2.css" />
<title>title</title>
</head>
<body>
    <div id="container">
        <div id="header"><b>main title</b></div>

        <div id="navigation" style="float:left">
            <b>Navigation</b> <br /><hr />
            Welcome<br />
            Team<br />
            Links<br />
            Screenshots<br />
        </div>
        <div id="contCont" style="float:left">
            Content
        </div>
    </div>
</body>
</html>

...そしてcssファイル：

@CHARSET "ISO-8859-1";

#container{         background-color:#00FF59;
                    width:1200px;}

#header{            background-color:#99FF99;
                    text-align:center;
                    font-family:bookman old style;
                    font-size:50px;
                    margin-top:20; margin-bottom:10;
                    margin-left:20; margin-right:20;}

#navigation{        background-color:#99FF99;
                    width:200px; height: 800px;
                    font-family:bookman old style;
                    font-size:20;
                    margin-top:10; margin-bottom:10;
                    margin-left:20; margin-right:20;}

#contCont{          background-color:#99FF99;
                    width:1000px; height: 800px;
                    font-family:bookman old style;}

注: float:left「navigation」と「contCont」の両方で既にテストしましたが、変更はありませんでした。

4

2 に答える 2

1

#contCont にいくつかのマージンを追加してみてください。試行錯誤の目的で jsfiddle を作成することも役立ちます。一般に、wysiwyg は開発に最適なアイデアではありません。また、コンテナの全体の幅にマージンを追加する必要があるため、幅が 200px の nav と両側に 20px のマージンがあり、コンテンツ div が 1000px の場合、コンテナの幅は 1240px にする必要があります。

于 2012-06-01T17:43:10.730 に答える
1

IDE が提供する WYSIWYG は、一般的にあまり信頼できません。

いずれにせよ、これを試してください：

#navigation{        background-color:#99FF99;
                width:200px; height: 800px;

                font-family:bookman old style;
                font-size:20px;
                margin-top:10px; margin-bottom:10px; float: left;
                margin-left:20px; margin-right:20px;}

#contCont{          background-color:#99FF99;
                width:960px; height: 800px; float:right;
                font-family:bookman old style;}

また、別の div でナビゲーションと contCont をラップします。

もう 1 つ注意すべき点は、ブラウザには html タグのデフォルト スタイルがあることです。たとえば、それらをリセットする必要があります。

*{
margin: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
font-weight: normal;
font-style: normal;
}

余白について、単位を指定していないことに気付いたもう 1 つの点はありますか? 上部の元のコードで修正しました。これが、余白が実際のブラウザに表示されない理由です。

また、前述のように、マージンを取り込んでいないため、コンテナーが小さすぎます。

于 2012-06-01T17:45:54.053 に答える