0

私はこれに4時間以上苦労してきましたが、これを理解できません。通常、サイトをデザインするときは常にサイトを中央に配置するので、div がレイアウトからはみ出すという問題に直面することはありません。

問題1

左にサイドバー、次にコンテンツブロック、右にサイドバーがあります。各サイドバーの幅は 180 ピクセルで、コンテンツ ブロックはこれら 2 つのサイドバーの間の空きスペースを埋める必要があります。

今は隣同士に浮かせることさえできません。以前はできたのですが、本当に夢中になっています。

それらを隣り合わせに浮かせたとしても、ページをズームインすると、コンテンツブロックがレイアウトを壊して左側のサイドバーの下に落ちるので、これまでにこの問題が発生したことはありませんでした。

問題2

ヘッダーの div ブロックは、content_wrapper に必要なものと同様に、2 つのロゴの間で自動的にサイズ変更する必要があります。これを行うにはどうすればよいですか?

誰か助けてくれませんか？

ありがとう

HTML

<div id="header">
    <div id="left_logo" class="logo"></div> <!-- Logo on the Left -->
    <div id="block">This is a block</div> <!-- Div block inbetween the two logos -->
    <div id="right_logo" class="logo"></div> <!-- Logo on the Right -->
</div>
<div id="content_wrapper">
    <div id="left_sidebar" class="sidebar">Left Sidebar</div>
    <div id="middle_content">Middle Content</div>
    <div id="right_sidebar" class="sidebar">Right Sidebar</div>
</div>

CSS

html,body {
    height:100%;
}

body {
    background-image: url('../bg.jpg');
}

#header {
    width: 100%;
    border: solid 1px;
    overflow: hidden;
}

.logo {
    width: 180px;
    height: 180px;
    background-image: url('../avatar.jpg');
    border: solid 1px;
}

#block {
    border: solid 1px;
    float: left;
}

#left_logo {
    float: left;
}

#right_logo {
    float: right;
}

#content_wrapper {
    width: 100%;
}

.sidebar {
    width: 180px; 
    float: left;
}

#middle_content {
    min-height: 500px; 
    width: 100%; 
    float: left;
}
4

1 に答える 1

0

注意点がいくつかあります

  • #right_sidebarを前に移動#middle_content
  • #right_sidebar左ではなく右に浮かぶ必要があります
  • #middle_content浮いてはいけないwidth: 100%
  • #middle_contentを独自の列に表示する場合、つまり、左右のサイドバーの下にフロートさせたくない場合は、 と を追加margin-leftします。margin-right

についても同様#headerです。

これがどのように見えるかについては、 JSFiddleを参照してください。

数年前のものですが、CSS を使用した基本的なレイアウト スキームの優れた概要がhttp://www.thenoodleincident.com/tutorials/box_lesson/boxes.htmlにあります。

于 2013-10-09T11:29:55.410 に答える