0

我需要构建如下布局

+-------+-----------------------------+-------+
|       |                             |       |
|       |                             |       |
|   A   |             B               |   C   |
|       |                             |       |
|       |                             |       |
|       |                             |       |
+-------+-----------------------------+-------+

在区域中，AI 想放置一个应与右上角对齐的图像。在区域 BI 中想要放置一个应该居中的图像（垂直和水平） 在区域 CI 中想要放置一个应该在左下角对齐的图像

我有以下标记。

<div style="float: left;">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" style="float: left;">
    [...]
</div>
<div style="float: right;">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

我曾尝试使用 CSS vertical-align，但它不起作用。我怎样才能得到我想要的？感谢您的帮助

4

5 回答 5

1 
    <div style="float: left;">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" style="padding:25% 50%; ">
    [...]
</div>
<div style="float: right; margin-top: -51.5%;">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

而且，请不要问为什么 51.5% - 它工作得很好（在 Chrome 中检查），为什么 - 我不知道自己）

于 2013-03-19T18:37:22.340 回答
1

在中心栏中水平和垂直对齐图像的最佳方法是使用背景图像。

background:url(yourimage.gif) no-repeat center center;

我会使用绝对定位将图像放置在您的左右列上。

.leftcolumn { height:400px; width:100px; float:left; position:relative; border:1px solid blue; overflow:auto; }
.leftcolumn img { position:absolute; top:0px; right:0px; }
.rightcolumn { height:400px; width:100px; float:right; position:relative; border:1px solid red; overflow:auto; }
.rightcolumn img { position:absolute; bottom:0px; left:0px; }

HTML 标记：

<div class="leftcolumn">
    <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
</div>
<div class="slideshow" ></div>
<div class="rightcolumn">
    <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
</div>

这是 .js 小提琴

于 2013-03-19T18:40:18.537 回答
1

布局是否流畅？不同的高度？宽度不像高度那么难处理

A区：什么都不做，图片会在页面的正常流程中去那里

B区：
选项1）如果盒子是固定尺寸的：使用margin:100px auto 0；其中 100px 是与顶部的差
选项 2）如果盒子是流动的：使用绝对位置 + 负边距技术。对于此示例，图像的高度为 200 像素，宽度为 300 像素，因此上边距和左边距为 -0.5 * 这些尺寸

.slideshow { position:relative; }
.slideshow img { position:absolute; top:50%; left:50%; margin:-100px 0 0 -150px; }

C区：

div.zoneC { position:relative; }
div.zoneC img { position:absolute; right:0; bottom:0; }
于 2013-03-19T18:49:19.247 回答
1

使用的解决方案table-row，table-cell这将允许您使用vertical-align.

显示属性 MDN。

HTML

<div class="area">
    <div style="width:250px;display:table-cell;text-align:right;">
        <img src="/images/sx.jpg" alt="sx" height="100" width="90" />
    </div>
    <div class="slideshow" style="display:table-cell;width:500px;vertical-align:middle;text-align:center;">[...]
    </div>
    <div style="display:table-cell;width:250px;vertical-align:bottom;text-align:left;">
        <img src="/images/dx.jpg" alt="dx" height="100" width="90" />
    </div>
</div>

CSS

.area{
    height:600px; /* some fixed height */
    display:table-row;
 }

div{
    border: 1px solid red;
}

JSF中。

表格单元格宽度也是固定的。

于 2013-03-19T18:49:56.200 回答
0

您可以使用表格布局：

HTML：

<div class="wrapper">
    <div class="a">A section</div>
    <div class="b">B section</div>
    <div class="c">C section</div>
</div>

CSS：

.wrapper {
    display: table;
    width: 100%;
}

.a,
.b,
.c {
    display: table-cell;
}

.a,
.c {
    width: [what you want];
}
于 2013-03-19T18:35:31.497 回答