html - 当一个或多个 div 的内容比其他的多时，div 会出现 float 问题。

Question

我写了一些代码来显示我的部分，如下所示:

它在移动和桌面版本上完美运行，但在平板电脑上会产生问题。

我想显示“列表”div，以在事件主题下的右侧显示事件名称和操作。

当我 clear:both to list 时它工作正常。但我认为这不是最好的解决方案。请指导我如何实现这一点，如果需要我也可以更改 HTML 结构。

我知道这是个很愚蠢的问题，请忽略并帮助我。

请点击“运行代码片段”以便更好地理解，可能我对我的观点不够清楚。

.lists-section {
  margin: 0 0 30px 0;
}
.lists-section > .list-view {
  margin: 0;
  padding: 0;
}
.lists-section > .list-view > .list-row:first-child {
  border-top: 1px solid #ccc;
}
.lists-section > .list-view > .list-row {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
  list-style: none;
}
.lists-section > .list-view > .list-row .list-style {
  float: left;
  margin-bottom: 30px;
  padding: 0 5px;
}
.lists-section > .list-view > .list-row .list-style p {
  margin: 0;
  line-height: 1.5;
}
.lists-section > .list-view > .list-row .list-style .sub-heading {
  font-size: 15px;
  font-weight: 600;
}
.lists-section > .list-view > .list-row .list-style .camp-name {
  margin-bottom: 5px;
  color: #21629A;
}
.lists-section > .list-view > .list-row .list-style .camp-description .edit-delte-icon {
  padding: 0 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="lists-section">
            <ul class="list-view">
                <li class="list-row clearfix">
                    <div class="list-style col-xs-12 col-sm-6 col-md-3">
                        <p class="camp-name sub-heading">Campaign Name</p>
                        <p class="camp-description">Name of Campaign Goes Here</p>
                        <p class="small">Created Date: <span>10-10-2016</span></p>
                        <p class="small">Schedule Date: <span>10-20-2016</span></p>
                    </div>

                    <div class="list-style col-xs-12 col-sm-6 col-md-3">
                        <p class="camp-name sub-heading">Campaign Subject</p>
                        <p class="camp-description">Campaign Subject Goes Here</p>
                    </div>

                    <div class="list-style col-xs-12 col-sm-6 col-md-3">
                        <p class="camp-name sub-heading">List</p>
                        <p class="camp-description">List Name Goes Here</p>
                    </div>

                    <div class="list-style col-xs-12 col-sm-6 col-md-3">
                        <p class="camp-name sub-heading">Actions</p>
                        <p class="camp-description">
                            <a href="create.aspx?cId=57" onclick="return fnEditCampaign('57')" class="edit-delte-icon"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> </a>
                            <a href="#" data-toggle="modal" onclick="return fnDelCampaign('57')" data-target="#delete" class="edit-delte-icon"> <i class="fa fa-trash" aria-hidden="true"></i></a>
                        </p>
                    </div>
                </li>

                
            </ul>
        </div>

Answer 1

将其添加到样式表的底部并确认这是否是您想要的样子

 .list-row {
            display: flex;
            flex-wrap: wrap;
        }