-1

ネットで見つけて問題に直面したコードを勉強しています。content というメインの div にテキストを追加すると、余白がなくなり、テキストがサイドバーに近すぎます。どうすれば直せますか？コードは次のとおりです。

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <div id="outer">
        <div id="header"></div>
        <div id="inner">
            <div id="sidebar"></div>  
            <div id="content">
        </div>  
    </div>
</html>

CSS

#outer {width:1000px;margin:0 auto;}
#inner {overflow:hidden;}
#header {min-height:40px;background:#bbb}
#content {width:900;min-height:900px;float:left;background:#ccc;clear:}
#sidebar{width:100px;min-height:250px;float:left;background:#ddd}
4

4 に答える 4

0

次のようなことを試しましたか

#content{box-sizing:border-box, width:900;min-height:900px;float:left;background:#ccc; padding:10px;}

「ボックスサイズ設定」を使用すると、ページが混乱しないようにする必要があります。

編集：そして、ええ、そのhtmlを閉じてください、それは本当に役立つかもしれません。

于 2013-01-19T18:19:18.043 に答える
0

CSS でコンテンツやサイドバー div にパディングやマージンを使用する

http://www.htmldog.com/guides/cssbeginner/margins/

于 2013-01-19T17:53:11.930 に答える
0

コンテンツ div 内に別の div を追加し、マージンを使用します。

段落タグを使用して、同じマージンを使用することもできます。これにより、レイアウトが壊れることはありません。

また、終了タグがありません。これは間違いなく修正する必要があります。

試す：

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <div id="outer">
        <div id="header"></div>
        <div id="inner">
            <div id="sidebar"></div>  
            <div id="content">
               <div class="box">
                all text and content comes here
                </div>
             </div>
        </div>  
    </div>
</html>

追加の CSS:

.box {
margin:50px;
}
于 2013-01-19T18:36:38.463 に答える
0

正確に何が必要なのかわからない。しかし、追加してみて padding-leftくださいmargin-left

#content {width:900;min-height:900px;float:left;background:#ccc;padding-left:20px;margin-left:10px;}
于 2013-01-19T18:27:50.790 に答える