Question

我已经编写了一些代码来显示我的部分，如下所示：

它完美适用于移动和桌面版，但在平板电脑上创建问题。

我想显示＆＃39; list＆＃39; div在广告系列主题下转到广告系列名称和右侧的操作。

当我清楚时，它的工作正常：两者都要列出。但我认为它不是最好的解决方案。请指导我如何实现这一点，如果需要我也可以改变HTML结构。

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

请点击＆＃39;运行代码段＆＃39;为了更好地理解，我可能不清楚我的观点。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

将其添加到样式表的底部，并确认这是否是您希望这样看的方式

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

当一个或多个div对其他div有更多内容时divs浮动问题。

1 个答案: