1

CSS のレイアウトで問題が発生しました。これが私が話しているコードです: Fiddle .

  1. の<div id="header">高さは、<div id="menubuttons">赤でマークした の高さになります。divの高さを指定しないと、その子の高さが得られるといつも思っていました。
  2. は定義<div class="contentLine>したものの にくっついています。<div id="theme">margin-top: 20px;
  3. 右の列は常に左の列よりもマージンが大きくなります。ブラウザウィンドウに対して両方に同じマージンを持たせたいです。

CSS

body {
    margin: 0 auto;
    padding: 0;
    font-family:'Share', cursive;
}
#header {
    width: 100%;
    vertical-align: middle;
}
#header_logo {
    width:;
    float: left;
    margin: 11px 20px 20px 20px;
    background-color:;
}
#menubuttons {
    margin-right: 0;
    margin-top: 0;
    height: 2.5em;
    line-height: 2.5em;
    display: inline-block;
    background-color: red;
}
#menubuttons ul {
    list-style-type: none;
    margin:0;
    padding:0;
}
#menubuttons li {
    float: left;
    margin-right: 20px;
}
a {
    font-family:'Share', cursive;
}
a:link {
    text-decoration:none;
}
a:visited {
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:active {
    text-decoration:underline;
}
#theme {
    width: 100%;
    height: 400px;
    background-color: green;
    margin-top: 0;
    float: left;
}
.contentLine {
    margin: 0 auto;
    margin-top: 20px;
    width: 96%;
}
.contentLine .column {
    float: left;
    margin: 0;
    width: 30%;
    margin-right: 1%;
    padding: 1%;
    position: inherit;
    /* shadow for seeing div boundaries */
    box-shadow: 0 0 1px black inset;
}
.contentLine #last {
    margin-right: 0;
}
4

2 に答える 2

5

1つずつ行かせて

1）<div id="header">フロート要素が含まれているため、それをクリアする必要があるためoverflow: hidden;、親要素で使用します#header

2) 繰り返しますが、フロート#themeしましたが、に設定したwidth: 100%;ので、そこにフロートする必要はありません。

3）それに応じて設定する必要がある最後の部分について、margins今は1%これを正しく計算する必要があるため、各要素を使用box-sizing: border-box;して設定し、適用することをお勧めします33% widthpadding-right

デモ

また、内部にネストされている浮動要素を必ずクリアしてくださいcontentLine。

あなたが IE のファンでない場合は、以下のスニペットを使用できます。これにより、より良い方法で親要素が自己クリアされます。

.clear:after { /* Much much better than overflow: hidden; */
   content: "";
   display: table;
   clear: both;
}
于 2013-09-25T10:02:52.477 に答える