Как установить гибкий контейнер для получения ширины его содержимого? [Дубликат]

Небольшая модификация кода Jeeped.

Если вы используете подобный подход, но с несколькими таблицами (например, более 10), то будет довольно громоздко пытаться вручную добавить каждое имя каждой таблицы. Это также проблема, если вы меняете имена таблиц, поскольку имена в VBA жестко связаны. Чтобы избежать дополнительной работы, рассмотрите следующее:

Итак, предположим следующее:

  • На каждом листе есть одна или несколько таблиц, но они имеют схожую структуру.
  • На листах есть только таблицы - никаких других элементов коллекции ListObjects не присутствуют.
  • Каждый раз, когда мы редактируем таблицу на листе, это вызывает обновление в главной таблице ( таблица 3).

Затем Subbook Workbook_SheetChange в приведенном выше примере может выглядеть следующим образом:

     Private Sub Workbook_SheetChange(ByVal Sh As Object, ByVal Target As Range)
     Dim tbl As ListObject
     For Each tbl In ActiveSheet.ListObjects
        If Not Intersect(Target, tbl.Range.Offset(1, 0)) Is Nothing Then
            On Error GoTo bm_Safe_Exit
            Application.EnableEvents = False
            Call update_Table
        End If
        Next tbl
        bm_Safe_Exit:
        Application.EnableEvents = True
     End Sub

Изменить. Вторая процедура будет выглядеть так:

   Private Sub update_Table()
    Dim iTBL3rws As Long, rng As Range, rngOLDBDY As Range
    Dim tbl As ListObject
    Dim sht As Worksheet
    iTBL3rws = 0

    ' consider all tables, excluding master table
    For Each sht In ThisWorkbook.Worksheets
        For Each tbl In sht.ListObjects
            If tbl.Name <> "Table3" Then
                iTBL3rws = iTBL3rws + tbl.DataBodyRange.Rows.Count
            End If
        Next tbl
    Next sht

    iTBL3rws = iTBL3rws + Sheet3.ListObjects("Table3").DataBodyRange.Cells(1, 1).Row - Sheet3.ListObjects("Table3").Range.Cells(1, 1).Row
        With Sheet3.ListObjects("Table3")

            Set rngOLDBDY = .DataBodyRange

            .Resize .Range.Cells(1, 1).Resize(iTBL3rws, .DataBodyRange.Columns.Count)

            If rngOLDBDY.Rows.Count > .DataBodyRange.Rows.Count Then
                For Each rng In rngOLDBDY
                    If Intersect(rng, .DataBodyRange) Is Nothing Then
                        rng.Clear
                    End If
                Next rng
            End If
        End With

End Sub

Эта процедура отличается от предыдущей, устраняя предварительно запрограммированные случаи. Когда на активном листе внесено изменение, любая таблица в этом листе, который должен быть изменен, вызовет процедуру update_Table.

12
задан Michael_B 22 October 2016 в 22:25
поделиться

4 ответа

В CSS родительский контейнер не знает, когда его дети обертывают. Следовательно, он продолжает масштабировать свой размер, не обращая внимания на то, что происходит внутри.

Другими словами, браузер отображает контейнер на начальном каскаде. Он не переплачивает документ, когда ребенок обертывается.

Вот почему контейнер не сжимает более узкий макет. Он просто продолжается, как будто ничего не завернуто, о чем свидетельствует зарезервированное пространство справа.

Максимальная длина горизонтального пробела - это длина элемента (ов), который контейнер ожидал там.

В следующей демонстрации можно видеть, что пробелы можно видеть и уходить, когда окно изменено по горизонтали: DEMO

Вам понадобится решение для JavaScript (см. здесь здесь и здесь ) ... или CSS-запросы (см. здесь ).

При работе с упаковкой текст, text-align: right в контейнере может быть полезен в некоторых случаях.

13
ответ дан Michael_B 17 August 2018 в 15:07
поделиться

Взгляните на мой Fiddle , в котором я изменил:

  • .holder width - max-width (в классах .v)
  • изменен .holder на wrap и space-around, его дети
  • добавили еще 2 класса .v для ясности
  • , удалили <br>'s
  • и, что самое важное, добавлено flex: 0 0 в .child

Flexbox почти всегда требует max-width, который более гибкий, чем width. В зависимости от того, как вам нужно .child ren вести себя, измените flex-grow и flex-shrink в flex: 0 0, чтобы удовлетворить ваши потребности. (результат flex: 1 0 выглядит неплохо)

... нет необходимости в Javascript ...

UPDATE Codrops Flexbox Reference действительно помогла мне много понимания FBL ...

3
ответ дан Rene van der Lende 17 August 2018 в 15:07
поделиться
  • 1
    Могу ли я спросить, что такое «FBL»? стоять? Сокращения делают вещи более запутанными, чем они есть. Я подозреваю, что это F для Flex и B для Box, но я не могу понять остальных. – amn 22 June 2018 в 21:10
  • 2
    Это означает «Гибкая компоновка коробок». Поздний ответ я знаю :) – romaricdrigon 20 July 2018 в 09:03

Причина, по которой ваши блоки ведут себя так, происходит из-за CSS-рендеринга.

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

В последнем случае вы сообщаете браузеру, где нужно сломать, чтобы он знал, что элемент не должен расширяться.

Единственный способ, которым вы можете легко решить это, - это установить перерывы самостоятельно.

1
ответ дан Wart Claes 17 August 2018 в 15:07
поделиться
  • 1
    Благодаря! Я боялся, что что-то подобное может произойти ... Все еще надеясь, что существуют какие-то умные хаки, поскольку это выглядит довольно распространенной ситуацией ... – Mikhail Kornienko 24 May 2016 в 07:19
  • 2
    У нас была аналогичная проблема в нашей работе, где мы хотели, чтобы значок плавал рядом с текстом: codepen.io/WartClaes/pen/grVQrz?editors=1100 . Только мы столкнулись с проблемой, что блок всегда делает полную ширину, тем не менее было много пробелов. – Wart Claes 24 May 2016 в 07:26
0
ответ дан Mark Chapel 29 October 2018 в 16:38
поделиться
Другие вопросы по тегам:

Похожие вопросы: