1

我有一个包含另外 3 个 div 的主 div，每个内部 div 被分成 20% 50% 和 30% 的宽度。我遇到了一个问题，当将窗口调整为更小的尺寸时，我得到了所有元素调整大小的挤压效果，但是我想将元素 1 和 3 保持在某些尺寸（分别为 40 像素和 75 像素）。我尝试将元素 1 设置为 40px，将元素 2 设置为 100%，将元素 3 设置为 75px 宽度，但最终让元素 2 占据所有空间并将其他元素推出。我将包含我不想实现的正常状态、调整大小状态和所需状态（调整大小）的图像。我怎样才能实现它？

在此处输入图像描述

如您所见，我只希望中间部分（元素 2）在调整窗口大小时调整大小。

4

4 回答 4

1 
     <div class="div-contain"> 
       <div class="div-1"><div>
       <div class="div-2"><div>
       <div class="div-3"><div>
     <div>




.div-contain {
     position: relative;
}

.div-1 {
   width: 20%;
   min-width: 40px;
   float: left;
}

.div-2 {
    width: 50%;
    position: abosolute;
    margin: 0 auto;
}


.div-3 {
      width: 30%;
      min-width:75px;
      float: right;
}

您还可以使用媒体查询并在到达断点时直接指定宽度。向中心 div 添加边距 左侧 div 的大小

于 2013-04-05T17:42:45.410 回答
1

我不知道这是否适合你，但基本上我将所有三个内部 div 都absolute定位了。并且必须使用 calc 来计算中间 div 的宽度。不使用 calc 可能会有更好的解决方案，但这就是我此时想到的。

http://jsfiddle.net/btevfik/VRU8V/

body{
    margin:0;
}

.container {
    height:20px;
    position:relative;
}

.div1 {
   width: 40px;
   position:absolute;
   left:0;
   border:1px solid blue;
}


.div2 {
   width: calc(100% - 120px);
   position:absolute;
   left:40px;    
   border:1px solid red;
}

.div3 {
   width: 75px;
   position:absolute;
   right:0;
   border:1px solid yellow;
}
于 2013-04-05T18:00:08.043 回答
1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
    margin:0;
    padding:0;
}

.wrapper{
    width:100%;
    height:400px;
    display:table;
}

#n1{
    width:20%;
    min-width:40px;
    background:red;
    display:table-cell;
}

#n2{
    width:50%;
    background:green;
    display:table-cell;
}

#n3{
    width:30%;
    min-width:75px;
    background:blue;
    display:table-cell;
}
</style>
<script type="text/javascript">
window.onload = function()
{
    document.getElementById('n1i').value = document.getElementById('n1').offsetWidth;
    document.getElementById('n2i').value = document.getElementById('n2').offsetWidth;
    document.getElementById('n3i').value = document.getElementById('n3').offsetWidth;
}

window.onresize = function()
{
    document.getElementById('n1i').value = document.getElementById('n1').offsetWidth;
    document.getElementById('n2i').value = document.getElementById('n2').offsetWidth;
    document.getElementById('n3i').value = document.getElementById('n3').offsetWidth;
}
</script>
</head>

<body>

<div class="wrapper">

    <div id="n1">
        &nbsp;
    </div>

    <div id="n2">
        &nbsp;
    </div>

    <div id="n3">
        &nbsp;
    </div>

</div>

First div width:<br />
<input type="text" id="n1i" readonly="true" /><br />

<br />

Second div width:<br />
<input type="text" id="n2i" readonly="true" /><br />

<br />

Third div width:<br />
<input type="text" id="n3i" readonly="true" />

</body>
</html>
于 2013-04-05T18:16:34.233 回答
1

最简单的方法可能是完全取消元素 2 并将其内容直接放在 parentdiv中。然后你可以浮动元素 1 和 2，当页面调整大小时，只有它们之间的空间会改变：

<style type="text/css">
    #parent {position:relative;width:100%;height:100%;}
    #parent div {position:relative;height:100%;}
    #element1 {width:40px;float:left;}
    #element3 {width:75px;float:right;}
</style>

<div id="parent">
    <div id="element1"></div>
    <div id="element3"></div>
    <!-- Place the contents of element 2 here -->
</div>
于 2013-04-05T18:20:06.670 回答