1

最近、複数の div を使用する Web サイトを作成しました。次に、ズームインおよびズームアウトし、特定の DIV を左隅に移動し、他の DIV を画面の右隅に移動しました。
以下は私のウェブサイトのコードです。誰かが私を助けてくれれば、大歓迎です。影響を受けるため、ヘッダーの後の本文の大部分を省略しましたが、このエラーは「コンテナー」div などの DIV の 1 つに関係しており、特定の DIV ごとの詳細ではないと考えていました。

HTML :

<html>
<head>
     <title> Test Website</title>
     <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
    <div id="container">

        <div id="top_section">
            <div id="logo">
                <img src="images/pbc_WHITE_bg.tif" width="180px" height="168px">
            </div>
        </div>

       <div id="navigation">
          <ul id="nav_menu">
             <li><a href="#">HOME </a></li>
             <li><a href="#"> NEWS</a></li>
             <li><a href="#"> MEDIA </a></li>
             <li><a href="#"> CONTACT</a></li>
          </ul>
       </div>
    </div>

CSS :

{
    position: relative;
    margin: 0;
    padding: 0;
    font-weight: lighter;
}

body {
    padding: 0px;
}

 p {

color: grey;
font-family: "brandon-grotesque",sans-serif;
font-size: 13px;
  }

 h1 {

color: black;
font-weight: lighter;
font-size: 14px;
font-family: "brandon-grotesque",sans-serif;
  }

  a {

font-size: 14px;
color: grey;
font-family: "brandon-grotesque",sans-serif;
  }

  #container {
margin: 0px auto;
/*background: pink;*/
width: 100%;
height: 169px;
border-bottom: 1px solid #F2F2F2;
  }

   #top_section {

width: 400px;
height: 170px;
/*background: black;*/
float: left;
  }

  #logo {
margin-left: 170px;
  }

  #navigation {

position: relative;
background: blue;
margin-top: 70px;
width: 700px;
float: right;
margin-right: 50px;
 }

 ul#nav_menu {

list-style-type: none;
  }

  ul#nav_menu li {

display: inline-block;
padding-right: 5px;
width: 150px;
text-align: right;
position: relative;
float: left;
 }

 ul#nav_menu li a{

    text-decoration: none;
    text-align: right;
}
4

4 に答える 4

1

貼り付けたコードは問題ありません。問題は、共有を怠った別の場所にあるに違いありません。表示される問題は、float の使用、text-align: right、およびインライン要素とブロック要素の混合である可能性があります。より一貫性のある簡単な HTML 開発のために、これらのそれぞれがどのように連携するかを時間をかけて学びましょう。

于 2013-07-02T12:01:04.797 に答える
1

使用する

overflow: auto;

それが必要なcssクラスで、 または使用することもできます

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}
于 2013-07-02T12:01:31.210 に答える
0

私は同じ種類の問題に直面しており、ピクセルを使用していました。emの代わりに使うべきだと言う人もいpxます。しかし、その時点ですべてのピクセルを ems に変更することはできませんでした。

ズーム中にコンテンツのサイズを変更するときに発生する小さな変更に対応できるように、コンテナのサイズを少し大きくすることでdiv、sがズームアウトするのを防ぐことができました。divお役に立てれば

于 2015-05-15T06:16:59.947 に答える
0

彼らがレスポンシブデザインと呼んでいるものがあります;)

画面の幅がすべての画面で同じではないという事実のために変化します+ブラウザウィンドウを縮小すると、それも変化するか、ズームイン/アウトします。

ソリューションはこれを行っています：

css で @media クエリとビューポートを使用してこれを修正し、このメタ タグを html に追加します。

 <meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”&gt;

@media クエリとビューポートを使用して、CSS で次のメディア クエリとビューポートを使用して、画面幅あたりのサイズを宣言します。

 @media screen and (min-width: 820px) and (max-width: 920px) {
  @viewport { width: 820px; }

// 幅が 820 ～ 920 ピクセルの画面の CSS はここに記述します

  }

私は主に次の値を使用します: from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, @media screen and (min-width: 1200px){ @viewport { width: 1200px; }(この最後のものは、幅が 1200 ピクセルを超える画面のサイズを設定するため、最大バージョンのコードはここに記述します}

したがって、これは、適応されるCSSコードがサイズに適応される6倍になることを意味します。

これはアダプティブ デザインまたはレスポンシブ デザインと呼ばれ、非常に簡単に実行できます。

詳細については、これを確認してください http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

あなたのデザインやウェブページを横に並べる div がある場合のちょっとしたヒントとして、css のこれらの div に overflow:hidden を追加すると、その問題が解決するはずです。

于 2014-04-16T07:52:46.187 に答える