Question

我创建了三个列，我希望在一行中包含一列，然后将其包含在一个部分中。

由于某种原因，这三列不会正确地包含在行内部，是否有更好的方法或我在代码中错过的更正方法？

＆＃13;

Private Declare Function GetWindowRect Lib "user32" (ByVal hWnd As Long, rcWindowRect As RECT) As Long
Private Declare Function GetCursorPos Lib "user32" (ptCursorPoint As POINTAPI) As Long

Private Type RECT
    Left As Long
    Top As Long
    Right As Long
    Bottom As Long
End Type

Private Type POINTAPI
    X As Long
    Y As Long
End Type

Sub test()
    Dim rcUsfWindowRect As RECT
    UserForm1.Show vbModeless
    lRet& = GetWindowRect(UserForm1.hWnd, rcUsfWindowRect)
    dblUsfRectWidth# = rcUsfWindowRect.Right - rcUsfWindowRect.Left
    dblUsfRectHeight# = rcUsfWindowRect.Bottom - rcUsfWindowRect.Top
    Debug.Print UserForm1.Width / dblUsfRectWidth
End Sub

＆＃13;

Private Declare Function FindWindowA Lib "user32" (ByVal lpClassName As String, ByVal lpWindowName As String) As Long
Public hWnd As Long

Private Sub UserForm_Initialize()
    hWnd = FindWindowA("ThunderDFrame", UserForm1.Caption)
End Sub

＆＃13;

Answer 1

在行上添加display: flex;，并从float移除column-1-3属性：

＆＃13;

.column-1-3 {
  width: 30%;
}

.section {
  width: 100%;
  margin: 40px 0;
  padding: 40px 0;
  position: relative;
}

.row {
  display: flex;
  width: 80%;
  max-width: 1080px;
  min-width: 414px;
  margin: auto;
  justify-content: space-between;
}

.post {
  width: 100%;
  height: auto;
  position: relative;
  background: #000;
  padding: 50px;
}

.video-post {
  background: #000;
  height: 300px;
  width: 100%
}

＆＃13;

<div class="section">
  <div class="row">
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
  </div>
</div>

＆＃13;

您也不需要将margin设为flex。只需在列上保留width: 30%，然后在行上使用justify-content: space-between;。

包含行中的列

1 个答案: