0

こんにちはこれは私のcssとhtmlコードです。いくつかのdivがあります。ブラウザのサイズが最大の場合は問題ありませんが、ブラウザのサイズを小さくするとdivの位置が変わります。たとえば、：<div id="cnrht"> id "cnrht" İçeriği Buraya Gelecek</div>はページの右側にありますが、ブラウザが小さくなると、他のdivの下と左側に移動します。どうすれば編集できますか。

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<style type="text/css">

* {
margin: 0;
padding: 0;
}
html { height:100%;
width:100%;}
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 75%;
line-height: 1.5em;
height:100%;
width:100%;

}
#wrapper {
    height: 100%;
    width: 100%;
    border: thin solid #F00;
    position: relative;
    visibility: visible;
    z-index: 1;
}
#container {
    border: thin dotted #006;
    z-index: 2;
    width: 100%;
}
#header {
    background-color: #993;
    clear: both;
    height: 100px;
    width: 100%;
}

#contain {
    background-color: #9F6;

    width: 100%;


}
#cnlft {
    background-color: #C69;
    padding: 10px;
    height: auto;
    width: 180px;
    float:left;
}
#cncnt {
    background-color: #F00;
    padding: 10px;
    width: 700px;
    height: auto;
    float:left;
}

#cnrht {
    background-color: #0FF;
    padding: 10px;
    float: left;
    width: 180px;
    height: auto;
}

.clr {clear:both;}
</style>
</head>

<body>
<div id="wrapper">
  <div id="container">
    <div id="header">id "wrapper" İçeriği Buraya Gelecek</div>
    <div id="contain">
      <div id="cnlft">id "contain" İçeriği Buraya Gelecek</div>
      <div id="cncnt"> id "cncnt" İçeriği Buraya Gelecek</div>
      <div id="cnrht"> id "cnrht" İçeriği Buraya Gelecek</div>
<div class="clr"></div>
    </div>
  </div>
</div>  
</body>
</html>
4

2 に答える 2

1

含む要素に最小幅を追加するのはどうですか

#contain {
    background-color: #9F6;
    min-width: 1120px;/*sum of all the widths of its children*/
    width: 100%;
}

フィドル

于 2012-08-02T19:55:55.047 に答える
0

コンテナの幅をpxで設定するか、子要素の幅を％で設定する必要があります。ユーザーがブラウザウィンドウを小さく（またはモニターの解像度）すると、コンテナの幅が％で表される場合、コンテナは減少し、コンテナの幅がpxで表される場合、コンテナの幅は同じままであるため、スライダーのみが追加されます。ウィンドウなので、ユーザーは今すぐスライドしてすべてのコンテンツを表示する必要があります。

1つの要素をユーザーウィンドウ（解像度）に適応させる場合は、他のすべての要素も適応させる必要があります。

min-width CSSプロパティがありますが、ユーザーのブラウザウィンドウ（または解像度）がmin-widthの値よりも小さい場合は、スライダーも追加されます:)

于 2012-08-02T19:57:53.377 に答える