4

我在 GWT 中有三个这样的元素：

HorizontalPanel picturePanel = new HorizontalPanel();
picturePanel.setStylePrimaryName("picturePanel");
image.setStylePrimaryName("picture");
leftArrow.setStylePrimaryName("arrow-left");
rightArrow.setStylePrimaryName("arrow-right");
picturePanel.add(leftArrow);
picturePanel.add(image);
picturePanel.add(rightArrow);

目前GWT编译后变成如下结构：

<table class="picture-container">
    ...
    <td align="left" style="vertical-align: top;">
        <img class="arrow-left" src="../images/icons/left2.svg"></img>
    </td>
    <td align="left" style="vertical-align: top;">
        <img class="picture mission-picture" src="../pictures/d5edc879-fe9b-4980-92e3-9bb4ac020abb.jpg"></img>
    </td>
    <td align="left" style="vertical-align: top;">
        <img class="arrow-right" src="../images/icons/right2.svg"></img>
    </td>
</table>

这种 HTML 结构很可能（希望）在 GWT 的下一个版本中得到改变。对于这个问题，是否可以为此编写 CSS（不关心当前的 HTML 结构），以便左箭头和右箭头将出现在图像下方的中心，而不是两侧？请注意，图片的大小是动态的。我最好不想更改 GWT 代码，因为 CSS 代码仅在页面小于某个宽度时使用，例如

@media only screen and (max-width: 420px) {
    .arrow-left{}
    .arrow-right{}
}

更新：

我尝试了一种不同的方法，即在 GWT 代码中使用 ResizeHandler，一旦宽度小于 420 像素，它将箭头移动到图像下方的不同面板。它可以工作，但我认为将它放在 CSS 中会更高效、更方便。这个解决方案感觉有点像一个丑陋的黑客，这让我很难过。

这是一个 jsfiddle，您可以在其中尝试描述的问题：http: //jsfiddle.net/YZSAr/

4

3 回答 3

3

TL;DR可以在 JSFiddle 上查看一个工作示例。

长版：首先，您需要用 SimplePanel 实例（在 GWT 中）包围图像，这些实例分别具有不同的 CSS 类，例如arrow-container-left和arrow-container-right。

然后css需要如下：

.picture-container {
    position: relative;
    width: 100%;

    background-color: yellow;
}

.picture {
    display: block;
    min-width: 190px;
    margin-left: auto;
    margin-right: auto;

    background: #fa0; /* orange */
}

.arrow-container-left,
.arrow-container-right {
    position: absolute;
    bottom: -65px;
    display: block;
    width: 50%;
    height: 66px;

    background-color: green;
}

.arrow-container-right {
    right: 0;
}

.arrow-left {
    position: absolute;
    right: 0;
    width: 62px;

    background-color: red;
}

.arrow-right {
    position: absolute;
    left: 0;
    width: 62px;

    background-color: blue;
}
于 2013-11-01T00:48:33.493 回答
0

像 td 和 tr 这样的表格元素往往很难使用 CSS 定位和更改。在使用不同的 Web 框架时，我经常遇到这类问题，而且我经常不得不修改源代码（如果我可以访问它）或使用 CSS/Javascript 破解它。

即使你想要一个使用 CSS 的解决方案，我也会考虑用 Javascript 来解决它。例如：

$('img.picture').parents('tbody').append(
  $('<tr></tr>').append(
    $('td .arrow-left, td .arrow-right').parent()
  )
);

此代码使用 .arrow-right 和 .arrow-left 删除包含图像的元素，然后将它们都插入到包含 img.picture 的行下方的新行中。

所以这也是一个应该让你难过的 hack，实际上我在写这个回复时流了一些眼泪，但希望它比 ResizeHandler hack 让你不那么难过。

这是结果的小提琴：http: //jsfiddle.net/YZSAr/5/

于 2013-10-31T18:16:44.280 回答
-1

我不认为你可以在不假设 HTML 结构的情况下编写 CSS。另外，我一直认为 GWT 中的 Horizo​​ntalPanel（以及 VerticalPanel）应该呈现为表格并且不会改变。

你为什么不改用FlowPanel呢？我想，它将所有元素放入 div 中，这将使它们在您的情况下变得微不足道。

于 2013-10-31T22:26:25.133 回答