Question

我有一个ul，其中包含由每个循环创建的一组lis and divs，uls和lis在那里，因此lis是可排序的，即拖放是启用后，图像显示在下一行不相互靠近的位置，请原因可能是

这是我的代码

.img-w {
        position: relative;
        background-size: cover;
        background-position: center;
        cursor: pointer;
        height: 150px;
        width: 200px;
    } 
<ul class="reorder-photos-list">
   @foreach ($images_ext as $image)
   <div style="width: auto;height: auto">
      <li id="{{$image->id}}">
         <div class="img-w " id="{{$image->id}}"style="background-image: url('{{$image->filename}}')"data-src="{{$image->filename}}">
            {{-- <a href=""> <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt=""></a>!--}}
         </div>
      </li>
      <span style="color: #333333;position: relative;width: 100%;text-align: justify;
         display: inline;">{{$image->description}} <i class="fa fa-upload"
         style="margin-left: 10px; color:#333333;"></i><br/> <br/></span>
   </div>
   @endforeach
</ul>

Answer 1

Div和li是块元素，因此自然会在下一行显示。除非你想浮动它们或将显示更改为内联。

尝试编辑您的html和css代码，如下所示;

<style>
    .img-box{
        float: left;
    }
    .img-w {
        position: relative;
        background-size: cover;
        background-position: center;
        cursor: pointer;
        height: 150px;
        width: 200px;
    }
    .clearfix{
        clear: both;
    }
</style>
@foreach ($images_ext as $image)
    <div class="img-box">
        <div class="img-w" id="{{$image->id}}"style="background-image: url('{{$image->filename}}')"data-src="{{$image->filename}}">
            {{-- <a href=""> <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt=""></a>!--}}
        </div>
        <span style="color: #333333;position: relative;width: 100%;text-align: justify;
         display: inline;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i></span>
    </div>
@endforeach

然后使用clearfix清除浮动

要包含UL和Li，请使用以下代码;

<ul>
    @foreach ($images_ext as $image)

        <li class="img-box">
            <div class="img-w" id="{{$image->id}}"style="background-image: url('gig.png')"data-src="{{$image->filename}}">
                {{-- <a href=""> <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt=""></a>!--}}
            </div>
            <span style="color: #333333;position: relative;width: 100%;text-align: justify;
             display: inline;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i></span>
        </li>

    @endforeach
</ul>

为每个语句设置无序列表的样式

1 个答案: