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”能够随宽度大小变化。

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

    .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？这可能吗？

谢谢。

Answer 1

尝试将图像的左内和右内div设置为auto，并将中间div设置为一定百分比。