vấn đề GWT bố trí

Question

Tôi có cấu trúc bố trí như vậy: 1) Trước tiên đặt SimpleLayoutPanel chính (biên giới màu xanh lá cây) 2) Tôi muốn thêm DockLayoutPanel con to main (đường viền màu đỏ; 25px lề)

Tôi đã thực hiện điều này, nhưng kết quả, hiển thị trong tập tin đính kèm (.jpg), là lạ đối với tôi. Vì vậy, tất cả các màu đỏ (trên cùng, bên trái, bên phải, phía dưới) biên giới của con nên bên chính, nhưng con thay đổi bảng. Làm thế nào tôi có thể thực hiện logic này một cách đúng đắn? Tôi có cấu trúc ui phức tạp hơn với mức 3-4. Và tôi cũng không làm việc mà không có lợi nhuận.

Và ở đây nó là mã và css:

SimpleLayoutPanel panel = new SimpleLayoutPanel(); 
panel.setStyleName("mainModulePanel"); 
SimpleLayoutPanel p = new SimpleLayoutPanel(); 
p.setStyleName("moduleBody"); 
panel.setWidget(p); 
initWidget(panel); 

//CSS  
.moduleBody { 
/*width: 100%; 
    height: 100%;*/ 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
    border: 3px solid red; 
} 

.mainModulePanel { 
/*margin-top: 5px; 
    margin-bottom: 5px; 
    margin-right: 5px;*/ 
    border: 3px solid green; 
} 

Answer 1

này đã làm với định nghĩa html cho biên giới!

Hãy để tôi giải thích bằng ví dụ.

DockLayoutPanel của bạn là 500x500px. Bạn đặt một phần tử con với 100x100% vào nó, trong đó lề, đệm và đường viền là 0px. Phần tử của bạn sẽ có kích thước 500x500px. Không, bạn cho nó đường viền 3px. Điều này có nghĩa là chiều cao và chiều rộng 3px được thêm vào. Vì vậy, phần tử của bạn có kích thước 506x506px. Luồng tràn bị bỏ qua.

Kết quả là ảnh thứ hai của bạn.

Đây là hành vi html chính xác và không liên quan gì đến GWT!

Answer 2

Tôi đã giải quyết được sự cố bằng cách xóa 100% chiều cao và chiều rộng .moduleBody CSS. Vì vậy, để tránh tình huống như vậy, bạn không nên kích thước yếu tố con bằng 100% chiều cao và chiều rộng. Xin cảm ơn các bạn!