試圖擴大與中心一個div兩個div，每面

下面我有以下的div結構：試圖擴大與中心一個div兩個div，每面

<div class="Large-Centered-Div"> 
<div class="Left-Div"> 
    <div class="Inner-Left-Div"> 
    </div> 
    <div class="Inner-Center-Div"> 
    </div> 
    <div class="Inner-Right-Div"> 
    </div> 
</div> 
<div class="Center-Div"> 
    (Small Image/Etc. Would Go Here) 
</div> 
<div class="Right-Div"> 
    <div class="Inner-Left-Div"> 
    </div> 
    <div class="Inner-Center-Div"> 
    </div> 
    <div class="Inner-Right-Div"> 
    </div> 
</div>

我所希望做的是有點複雜，但希望這一切是有道理的：

有「大中心-DIV」放大頁面的整個寬度和「大中心 - 格」中有「左格」，「中心 - 格」，和「右派」的設置，使「中心 - Div「較小，」Left-Div「和」Right-Div「較大，因此」Center-Div「的寬度較小，但在中間。
在「Left-Div」和「Right-Div」中，我希望「Inner-Center-Div」佔據大部分空間，只有「Inner-Left-Div」和「Inner-Right-Div」佔用足夠的空間來顯示其各自邊緣的圖像。另外，我希望「Inner-Center-Div」與寬度尺寸一致。

考慮到這些事情，我已經實現了列表中的第一個目標，但沒有達到第二個目標。這裏是第一項的代碼：

 

    .Large-Centered-Div { 
     position:relative; 
     left:0px; 
     right:0px; 
    } 

    .Left-Div { 
     float:left; 
     vertical-align:middle; 
     width:47%; 
    } 

    .Center-Div { 
     float:left; 
     width:6%; 
     text-align:center; 
    } 

    .Right-Div { 
     float:left; 
     vertical-align:middle; 
     width:47%; 
    }

問題是，我該如何實現＃2？這可能嗎？

謝謝。

來源

2012-06-27 TMason

你是什麼意思'我希望「Inner-Center-Div」與寬度尺寸一致。'？ – Hope4You

嘗試使圖像的內部左和內部右div自動，並使inter中心div有一定比例。

來源

2012-06-27 20:49:32 DrinkJavaCodeJava

我會做的是硬編碼圖像的寬度。我們稱之爲w像素。所以：

.Inner-Left-Div, .Inner-Right-Div { width: wpx; }

然後內部中心div將擴大以填充其餘的空間。

來源

2012-06-27 21:01:06

我會做的是使div的寬度爲百分之一的函數，這樣，它們將永遠是相同的相對於彼此，他們將完美調整大小。

 

.Large-Centered-Div{ 
    width: 100%; 
} 

.Left-Div, .Right-Div, .Inner-Left-Div, .Inner-Right-Div{ 
    width: 40%; 
} 

.Center-Div, .Inner-Center-Div{ 
    width:20%; 
}

這是迄今爲止最快和最乾的完成此方法。

另外，爲了約定，最好將類名保持爲小寫。如果你簡化它們，記住你的約定會更容易，祝你好運！

-Brian

來源

2012-08-16 19:58:50 OneChillDude

試圖擴大與中心一個div兩個div，每面

回答

相關問題