1

別の 3 つの div を含むメイン div があり、内側の div はそれぞれ 20%、50%、および 30% の幅に分かれています。ウィンドウのサイズを小さいサイズに変更すると、すべての要素のサイズが変更されると、そのスクイーズ効果が得られますが、要素 1 と 3 を特定のサイズ (それぞれ 40px と 75px) に保ちたいという問題が発生しました。要素 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 
<!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 に答える