试图扩大与中心一个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，每面

回答

相关问题