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

2023年12月24日 203次阅读

我在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/

最佳答案 TL; DR A
working example可以在JSFiddle上查看.

长版：
首先,您需要使用具有不同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;
}
点赞