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表示，容器宽度不变，只会添加滑块窗口，因此用户现在必须滑动才能查看所有内容。

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

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

于 2012-08-02T19:57:53.377 回答