Question

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

Answer 1

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

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

FIDDLE

Answer 2

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

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

有min-width CSS属性，但如果用户浏览器窗口（或分辨率）小于min-width值，它也会添加滑块：）

Div的位置

2 个答案: