移動元素與響應CSS的GWT

我有這樣三個要素在GWT：移動元素與響應CSS的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/

來源

2013-10-29 spydon

TL; DR A working example可以在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-01 00:48:33 nyaray

像TD和TR表元素往往很難定位和使用CSS改變。在使用不同的Web框架時，我經常遇到這些問題，並且經常需要修改源代碼（如果我有權訪問它）或使用CSS/Javascript進行修改。

即使你想要一個使用CSS的解決方案，我會考慮在Javascript中解決它。例如具有：

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

該代碼去除包含與.arrow右和.arrow左圖像中的元素，然後將它們都插入到含有img.picture行下面一個新行。

所以這也是一個讓你難過的黑客，我在寫這個回覆時實際上流下了一些眼淚，但是希望它會讓你不像ResizeHandler黑客那樣傷心。

這裏有結果的小提琴：http://jsfiddle.net/YZSAr/5/

來源

2013-10-31 18:16:44 rasmushaglund

這不會對我的工作有以下幾個原因，首先，我不能依賴於當前的HTML結構，因爲它可能會改變，其次這將，據我瞭解，當頁面大小調整時，將箭頭永久移動並保留在圖片下方。所以它也必須有一個聽衆。感謝您的努力！ – spydon

-1

我不認爲你可以寫CSS而不承擔的HTML結構。另外，我一直認爲GWT中的HorizontalPanel（以及VerticalPanel）應該被渲染爲表格，並且不會改變。

爲什麼不用FlowPanel代替？它將它的所有元素都放入div中，我想這會讓它們在你的案例中變得微不足道。

來源

2013-10-31 22:26:25 siledh

如何更容易定位divs？ – spydon

移動元素與響應CSS的GWT

回答

相關問題