Div的位置

时间:2012-08-02 19:46:05

标签: html css

嗨这是我的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>

2 个答案:

答案 0 :(得分:1)

如何为包含元素添加最小宽度

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

FIDDLE

答案 1 :(得分:0)

您必须在px中设置容器的宽度,或以%为单位设置子元素的宽度。因为,当用户使浏览器窗口变小(或显示器分辨率)时,如果容器宽度用%表示,容器将减少,如果容器宽度用px表示,容器宽度将保持不变,只有滑块将添加到窗口,因此用户必须立即滑动以查看所有内容。

如果您希望一个元素适应用户窗口(分辨率),则所有其他元素也必须是自适应的。

有min-width CSS属性,但如果用户浏览器窗口(或分辨率)小于min-width值,它也会添加滑块:)