Question

我在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，一旦宽度小于420px，箭头就会移动到图像下方的不同面板。它有效，但我认为在CSS中使用它会更有效率和方便。这个解决方案感觉有点像丑陋的黑客，这让我很难过。

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

Answer 1

TL; DR 可以在JSFiddle上查看working example。

长版：首先，您需要使用具有不同CSS类的SimplePanel实例（在GWT中）包围图像，例如，分别为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;
}

Answer 2

像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的行下方的新行中。

所以这也是一个应该让你伤心的黑客，我写这个回复时真的流下了眼泪，但希望它会让你比ResizeHandler黑客更难过。

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

Answer 3

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

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

在GWT中使用响应式CSS移动元素

3 个答案: