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>

我期待做的事情有点复杂，但希望这一切都有道理：

让“Large-Centered-Div”扩展页面的整个宽度，在“Large-Centered-Div”中有“Left-Div”，“Center-Div”和“Right- Div“设置为”Center-Div“较小，”Left-Div“和”Right-Div“较大，因此”Center-Div“宽度较小但位于中间。
在“Left-Div”和“Right-Div”中，我希望“Inner-Center-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？这可能吗？

感谢。

Answer 1

尝试使图像的内部左侧和右侧div自动，并使中心间div保持一定的百分比。

Answer 2

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

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

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

Answer 3

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

尝试扩展并居中一个Div，每边有两个div

3 个答案: