иметь Div заполнить неопределенную ширину [ФОТО ИЗ ФИЛЬМА]

Question

Этот вопрос может быть более понятным, если у вас есть опыт работы с Vaadin или GWT или аналогичными, но хороших навыков CSS и веб-разработки должно быть достаточно.

У меня возникла дилемма.В представлении нашего веб-приложения у нас есть три панели, две вверху бок о бок и одна внизу, которые должны занимать столько же ширины, сколько две вышеупомянутые вместе взятые, образуя «квадрат» из трех панелей.

Вот изображение, объясняющее это:

Проблема в том, что только одна панель (вверху слева) может иметь статическую заданную ширинупотому что отображаемые там данные очень предсказуемы.Другой в правом верхнем углу будет содержать различный контент, который может варьироваться по ширине + -100 пикселей.

Теперь я хочу, чтобы нижняя панель была отрегулирована по ширине и заполняла ту же ширину, что и панели выше.

А вот и часть Vaadin (это фреймворк, в котором разрабатывается веб-приложение).Я пробовал просто иметь верхнюю панель в HorizontalLayout, которая находится внутри VerticalLayout вместе с нижней панелью.Я бы надеялся, что смогу установить нижнюю панель на setWidth("100%"), и она будет регулировать ее ширину в соответствии с шириной VerticalLayout, но, конечно, это не сработает, поскольку VerticalLayout не имеет указанной ширины.

Затем я выполнил тест, используя GridLayout, который был 2 × 2, где верхний ряд имел две ячейки с разметками в каждой, а нижний ряд имел нижнюю разметку в двух ячейках. Код :

GridLayout grid = new GridLayout(2, 2);

        SHorizontalLayout h1 = new SHorizontalLayout();
        SHorizontalLayout h2 = new SHorizontalLayout();
        SHorizontalLayout h3 = new SHorizontalLayout();

        h1.addComponent(new Embedded(null, new ThemeResource("../m2m/img/lock_20x20.png")));
        h2.addComponent(new Embedded(null, new ThemeResource("../m2m/img/lock_20x20.png")));
        h3.addComponent(new Embedded(null, new ThemeResource("../m2m/img/lock_20x20.png")));

        h1.setSizeFull();
        h2.setSizeFull();
        h3.setSizeFull();

        h1.setStyleName("test-layout1");
        h2.setStyleName("test-layout2");
        h3.setStyleName("test-layout3");

        grid.addComponent(h1, 0, 0);
        grid.addComponent(h2, 1, 0);
        grid.addComponent(h3, 0, 1, 1, 1);

        outerHLayout.addComponent(grid);

Это даст такой результат:

Однако нижняя ячейка имеет ширину двух верхних вместе взятыхкогда он сфокусирован в инструменте FireBug:

Но Vaadin автоматически генерирует div (<div style="float: left; margin-left: 0px;">), который ограничивает ширину контента размером контента (даже если контентset to setSizeFull ()).

Так что я действительно хотел бы получить некоторую помощь по этой проблеме в целом, используя CSS или от кого-то, кто привык к Vaadin, чтобы помочь мне с тем, как указать сетку, чтобы она несгенерируйте этот внутренний div, ограничивающий ширину содержимого.

Если вы хотите, чтобы я предоставил дополнительную информацию, пожалуйста, спросите меня!

Я знаю, что это утомительно длинный вопрос, поэтому я бы хотелочень хочу поблагодарить вас, кто прочитал это далеко, спасибо!

Answer 1

Я не знаком с Vaadin / GWT, но с точки зрения CSS и HTML:

<div style="overflow: auto;">
    <div style="float: left; width: 100px;"> Static width </div>
    <div style="overflow: hidden;display: inline-block;"> <div> dynamic width </div> </div>
    <div> dynamic width 2 </div>
</div>​

По умолчанию <div> занимает все пространство, поэтому, устанавливая первый внутренний float:left;, мы меняемпоток рендеринга для него, поэтому следующий div будет пытаться занять все оставшееся пространство (или растянуть как можно больше).overflow: auto или overflow: hidden запускает перерисовку / пересчет этих элементов, так что динамическая ширина верна.display: inline-block; удаляет просчеты из ширины div, когда он отображается в режиме block с полями рядом ("на той же строке, что и") floated block.

Пример: http://jsfiddle.net/MUN8E/3/. Протестировано с Chrome, IE9.(Кажется, не работает с IE7, скажите, требуется ли поддержка IE7)

Модифицированная структура

<div style="overflow: auto;float: left;">
  <div>        
    <div style="float: left; width: 100px;"> static</div>
    <div style="overflow: hidden;display: inline-block;">
        dynamic width
    </div>
  </div>
  <div>
     dynamic width 2
  </div>
</div>​

, которая имеет ту же структуру, что и в @Marthin ответ.Если контейнер div не равен floated, он займет все пространство.

Я не уверен, что вы можете сделать это в Ваадине, но на основании ответа @ Marthin ,Вы можете сделать что-то вроде этого (используя ту же структуру):

container.setStyleName("container");
smallTopLeft.setWidth("300px"); 
smallTopLeft.setStyleName("small_left"); //
smallTopRight.setStyleName("small_right");

И стили CSS:

.container {
    overflow: auto;
    float: left;
}
.container div {
    float: none;
    display: block; /* In case css produced by Vaadin has floats by default */
}
.small_left {
    float: left;
}
.small_right {
    overflow: hidden;
    display: inline-block;
}

Надеюсь, это поможет.

Answer 2

Мое предложение состоит в том, чтобы вы позволили вашим 3 видам быть добавленными в основной контейнер, который представляет собой VerticalLayout, и чтобы ваши два меньших верхних макета были обернуты в horozontallayout, который, в свою очередь, также добавляется в основной контейнер.

Что-то вроде этого

    VerticalLayout container = new VerticalLayout();
    HorizontalLayout topWrapper = new HorizontalLayout();

    container.setSizeFull();
    topWrapper.setSizeFull();

    VerticalLayout smallTopLeft = new VerticalLayout();
    VerticalLayout smallTopRight = new VerticalLayout();
    VerticalLayout largeBottom = new VerticalLayout();

    smallTopLeft.setWidth("300px");
    smallTopRight.setSizeFull();
    largeBottom.setSizeFull();

    topWrapper.addComponent(smallTopLeft)
    topWrapper.addComponent(smallTopRight)

    container.addComponent(topWrapper);
    container.addComponent(largeBottom);