Question

尝试使用我在这里遇到的代码来创建响应式翻页式图库。一切工作都很好，除了当我尝试将翻转卡片彼此对齐（尝试每行创建三张卡片）然后它们消失时。我尝试使用display：inline-block和flex-grid，但无法弄清楚我要去哪里。

谢谢！

这是初始代码：

HTML

FindFirstEmptycell

CSS：

Option Explicit

Sub main()
Dim wbPaste As Workbook
Dim wsPaste As Worksheet
Dim wbCopy As Workbook
Dim wsCopy As Worksheet
Dim value As String
Dim rangeToSearch As Range

    Set wbPaste = Workbooks("Book1")
    Set wsPaste = wbPaste.Sheets("Sheet1")

    Set wbCopy = Workbooks("Book2")
    Set wsCopy = wbCopy.Sheets("Sheet1")

    Set rangeToSearch = wsPaste.Range("D:D")
    value = wsCopy.Range("A1")

    FillFirstEmptyCell rangeToSearch, value

    Set rangeToSearch = wsPaste.Range("F:F")
    value = wsCopy.Range("B1")

    FillFirstEmptyCell rangeToSearch, value
End Sub

Sub FillFirstEmptyCell(ByRef rangeToSearch As Range, ByVal value As String)
Dim address As String

    address = FindFirstEmptyCell(rangeToSearch)
    If Not address = "" Then
        rangeToSearch.Worksheet.Range(address) = value
    End If
End Sub

Function FindFirstEmptyCell(ByRef rangeToSearch As Range) As String
Dim cell As Range
    For Each cell In rangeToSearch
        If cell.value = "" Then
            FindFirstEmptyCell = cell.address
            Exit For
        End If
    Next cell
End Function

Answer 1

我在jsfiddle中尝试了您的代码，但它们是html代码的一部分，并且我修复了.container和.card-container类

你在这里

HTML

<div class="container">
<div class="card-container">
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner"><img src="image1.jpg" style="height: 100%;"> </div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card-container">
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner"><img src="metalcard.jpg" style="height: 100%;"></div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card-container">
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner"><img src="image3.jpg" style="height: 100%;"></div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.container {
   width: 100%;

}

.card-container{
    width: 25%; /* Adjust the target width*/
    display: inline-block;

}

使用嵌入式块时，div消失

1 个答案: