Question

我有一个主div，其中包含另外3个div，内部div分别为20％50％和30％的宽度。我遇到了一个问题，当将窗口调整为较小的尺寸时，我得到了所有元素调整大小的压缩效果，但是我希望将元素1和3保持在特定大小（分别为40px和75px）。我尝试将元素1设置为40px，元素2设置为100％，将元素3设置为75px宽度，但是通过获取元素2来占用所有空间并推出其他元素。我将包括我想要达到的正常状态，调整大小状态和所需状态（调整大小）的图像。我怎么能实现它？

enter image description here

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

Answer 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处添加一个边距

Answer 2

我不知道这是否适合你，但基本上我将所有三个内部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;
}

Answer 3

<!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>

Answer 4

最简单的方法可能是完全取消元素2，只将其内容直接放在父div中。然后你可以浮动元素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>

百分比宽度问题

4 个答案: