Question

我正在尝试对齐包含在div中的卡片。我想要做的是将这些卡对齐，直到它达到最大屏幕宽度，然后我希望它自动移动到下一行。

问题是，一旦我复制了html代码，新复制的卡就会在之前的卡片上生成而不是彼此相邻。

HTML：

combo_box2

CSS：

from PySide2.QtWidgets import (QWidget, QApplication, QGraphicsView, QGridLayout)
from PySide2 import QtCore, QtWidgets, QtGui
from PySide2.QtOpenGL import *
from PySide2.QtCore import *
from PySide2.QtGui import *

image_path_str='image.jpg'

class View(QGraphicsView):
    photo_clicked = QtCore.Signal(QtCore.QPoint)

    def __init__(self, parent):
        super(View, self).__init__()
        self.scene = QtWidgets.QGraphicsScene(self)
        self.photo = QtWidgets.QGraphicsPixmapItem()
        self.scene.addItem(self.photo)
        self.pixmap = QtGui.QPixmap(image_path_str)
        self.photo.setPixmap(self.pixmap)
        self.setScene(self.scene)
        self.setDragMode(QGraphicsView.ScrollHandDrag)

class Window(QWidget):
    def __init__(self):
        super(Window, self).__init__()
        self.view = View(self)

        self.layout_contain_P1_P2 = QtWidgets.QGridLayout()
        self.checkbox_P1= QtWidgets.QCheckBox("P1",self)
        self.line_edit_P1_x = QtWidgets.QLineEdit(self)
        self.line_edit_P1_x.setReadOnly(True)
        self.line_edit_P1_y = QtWidgets.QLineEdit(self)
        self.line_edit_P1_y.setReadOnly(True)

        self.layout_contain_P1_P2.addWidget(self.checkbox_P1, 0, 0, Qt.AlignLeft)

        self.grid_layout_P1_x_y = QtWidgets.QGridLayout()
        self.grid_layout_P1_x_y.addWidget(self.line_edit_P1_x, 1, 0, Qt.AlignLeft)
        self.grid_layout_P1_x_y.addWidget(self.line_edit_P1_y, 2, 0, Qt.AlignLeft)

        self.layout_contain_P1_P2.addLayout(self.grid_layout_P1_x_y, 0, 1, 1, 1)
        self.checkbox_P2 = QtWidgets.QCheckBox("P2",self)
        self.line_edit_P2_x = QtWidgets.QLineEdit(self)
        self.line_edit_P2_x.setReadOnly(True)
        self.line_edit_P2_y = QtWidgets.QLineEdit(self)
        self.line_edit_P2_y.setReadOnly(True)

        self.layout_contain_P1_P2.addWidget(self.checkbox_P2, 1, 0, Qt.AlignLeft)
        self.grid_layout_P2_x_y = QtWidgets.QGridLayout()

        self.grid_layout_P2_x_y.addWidget(self.line_edit_P2_x, 0, 0, Qt.AlignLeft)
        self.grid_layout_P2_x_y.addWidget(self.line_edit_P2_y, 1, 0, Qt.AlignLeft)

        self.layout_contain_P1_P2.addLayout(self.grid_layout_P2_x_y, 1, 1, Qt.AlignLeft)

        self.combo_box1 = QtWidgets.QComboBox(self)
        self.combo_box1.addItem("measurements set 1")
        self.combo_box1.addItem("measurements set 1")

        self.combo_box2 = QtWidgets.QComboBox(self)
        self.combo_box2.addItem("P1-P2")
        self.combo_box2.addItem("P3-P4")

        self.vertical1= QtWidgets.QVBoxLayout()

        self.vertical1.addWidget(self.combo_box1)
        self.vertical1.addWidget(self.combo_box2)
        self.vertical1.addLayout(self.layout_contain_P1_P2)

        self.vertical2= QtWidgets.QVBoxLayout()
        self.vertical2.addWidget(self.view)

        self.horizontal= QtWidgets.QHBoxLayout()
        self.horizontal.addLayout(self.vertical1)
        self.horizontal.addLayout(self.vertical2)

        self.setLayout(self.horizontal)
        self.setWindowTitle("Image viewer")
        self.setGeometry(200, 200, 1000, 800)

app = QApplication.instance()
if app is None:
        app = QApplication([])
w = Window()
w.show()
w.raise_()
QApplication.setOverrideCursor(QCursor(Qt.CrossCursor))
app.exec_()

使用Javascript：

        <div class="fighter-card">

        <div class="front active">
            <div class="ranking-position">1</div>

            <div class="more">
                <i class="fa fa-info-circle" aria-hidden="true"></i>
            </div>

            <div class="fighter-picture">
                <img src="~/images/Resources/RankingsPhotos/Lomachenko.png" />
            </div>

            <ul class="information">
                <li>
                    <div class="information-left">Name:</div>
                    <div class="information-right">aa</div>
                </li>
                <li>
                    <div class="information-left">Weight:</div>
                    <div class="information-right">aa</div>
                </li>
                <li>
                    <div class="information-left">Belts:</div>
                    <div class="information-right">aa</div>
                </li>
            </ul>

        </div>

        <div class="back">

            <div class="go-back">
                <i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
            </div>

            <ul class="information">
                <li>
                    <div class="information-left">Yesterday</div>
                    <div class="information-right">9<sup>o</sup></div>
                </li>
                <li>
                    <div class="information-left">Today</div>
                    <div class="information-right">9<sup>o</sup></div>
                </li>
                <li>
                    <div class="information-left">None of your business</div>
                    <div class="information-right">9<sup>o</sup></div>
                </li>
                <li>
                    <div class="information-left">Yesterday</div>
                    <div class="information-right">9<sup>o</sup></div>
                </li>
                <li>
                    <div class="information-left">Today</div>
                    <div class="information-right">9<sup>o</sup></div>
                </li>
                <li>
                    <div class="information-left">aa</div>
                    <div class="information-right">9<sup>o</sup></div>
                </li>
            </ul>

        </div>

    </div>

<div class="fighter-card">
//Next div with the same content for testing
</div>

我知道这里输入了很多代码。只是想确保包含与此问题相关的所有内容。提前致谢。

Answer 1

如果您使用绝对定位并指定位置，那么您应该为每张卡执行此操作。如果没有，请让浏览器使用display: inline-block或float: left进行定位（如果该行中还有其他内容）。

对齐彼此旁边的div（卡片样式）

1 个答案: