html - 尝试用每边两个 div 扩展和居中一个 div

Question

我在下面有以下 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>

我想做的有点复杂，但希望这一切都有意义：

1. 让“Large-Centered-Div”扩大页面的整个宽度，并在“Large-Centered-Div”内设置“Left-Div”、“Center-Div”和“Right-Div”，以便“Center-Div”很小，“Left-Div”和“Right-Div”很大，这样“Center-Div”的宽度很小但在中间。

2. 在“Left-Div”和“Right-Div”中，我希望“Inner-Center-Div”占据大部分空间，并且只有“Inner-Left-Div”和“Inner-Right- Div" 占用足够的空间来显示它们各自边缘的图像。另外，我希望“Inner-Center-Div”的宽度大小是流动的。

考虑到这些事情，我已经实现了清单上的第一个目标，但没有实现第二个目标。这是第一项的代码：

    .Large-Centered-Div {
        位置：相对；
        左：0px；
        右：0px；
    }

    .Left-Div {
        向左飘浮;
        垂直对齐：中间；
        宽度：47%；
    }

    .Center-Div {
        向左飘浮;
        宽度：6%；
        文本对齐：居中；
    }

    .Right-Div {
        向左飘浮;
        垂直对齐：中间；
        宽度：47%；
    }

问题是，我如何实现#2？这可能吗？

谢谢。

Answer 1

我要做的是硬编码图像的宽度。我们称它为 w 像素。所以：

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

然后内部中心 div 将扩展以填充其余空间。

Answer 2

我要做的是使 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%;
}

这是迄今为止实现这一目标的最快和最干燥的方法。

另外，为了约定，最好将您的类名保留为小写。如果您简化它们，则更容易记住您的约定，祝您好运！

-布赖恩

Answer 3

尝试使图像的内左和内右 div 为自动，并使中间中心 div 具有一定的百分比。