html布局的相关问题

Question

我只要加上 “求长度,判断是否有更多属性,有则显示” 代码块后，页面布局就会覆盖下方布局，删除此代码块则正常，如何解决？

删除此代码块的正常效果如下：

    <!-- 求长度,判断是否有更多属性,有则显示-->
        {{$goodsItemAttrListLen := len .goodsItemAttrList}}
        {{if gt $goodsItemAttrListLen 0 }}
        {{range $_, $value := .goodsItemAttrList}}
        <div class="ft20 ml20 mt20">{{$value.Cate}}</div>
        <div class="xzbb ml20 mt10 clearfix">

            {{range $_,$v := $value.List}}
            <div class="banben fl">
                <span>{{$v}}</span>
            </div>
            {{end}}
        </div>
        {{end}}
        {{end}}


        <div class="xqxq mt10 ml20">
            <div class="top1 mt10">
                <div class="left1 fl">{{.goods.GoodsVersion}} <span id="color_name"></span></div>
                <div class="right1 fr">{{.goods.Price}}元</div>
                <div class="clear"></div>
            </div>
            <div class="bot mt20 ft20 ftbc">总计：{{.goods.Price}}元</div>
        </div>
        <div class="xiadan ml20 mt10">
            <input id="addCart" class="jrgwc" type="button" name="jrgwc" value="加入购物车" />
        </div>
    </div>
    <div class="clear"></div>
</div>



<div class="container clearfix">
    <div class="c_left">

        <h2>看了又看</h2>

        <div class="item">

            <a target="_blank" href="#">

                <img src="/static/upload/20211117/1637139107685884400.jpg" />

                <p class="price recommendLookPrice4183081">￥31.90</p>

                <p>三利 纯棉A类标准简约素雅大浴巾 70×140cm 男女同款 柔软舒适吸水裹身巾 豆绿</p>

            </a>


        </div>

    </div>

.container{
    width: 1226px;
    
    margin:0 auto;
}
.clearfix::after{
    clear: both;
    content: "";
    display: block;
}

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

从您提供的截图和代码来看，问题似乎在于当您添加了处理商品属性的代码块后，页面的布局出现了覆盖现象。这通常是由于CSS样式或HTML结构导致的布局冲突。

问题分析

1. 代码块插入位置：您添加的代码块可能在HTML结构中插入的位置不正确，导致其影响了下方内容的显示。
2. CSS样式冲突：可能存在CSS样式的冲突，使得新添加的代码块覆盖了下方的内容。

解决方案

1. 检查代码块的插入位置

确保代码块插入在正确的位置，不会干扰到下方内容的显示。您可以尝试将代码块移动到更早的位置，或者在不影响布局的情况下重新组织HTML结构。

2. 调整CSS样式

检查CSS样式，特别是与.ft20、.ml20、.mt20、.xzbb、.banben等类相关的样式，看看是否有样式覆盖或冲突。

3. 使用浮动和清除浮动

从您的代码中可以看到使用了clearfix类来清除浮动。确保在适当的位置使用clearfix来避免布局问题。

4. 使用JavaScript动态处理

如果问题是由于动态生成的内容导致的，可以考虑使用JavaScript来动态处理这些内容的显示，而不是直接在HTML中硬编码。

示例代码调整

以下是一些可能的代码调整示例：

<div class="container clearfix">
    <div class="c_left">
        <h2>看了又看</h2>

        <div class="item">
            <a target="_blank" href="#">
                <img src="/static/upload/20211117/1637139107685884400.jpg" />
                <p class="price recommendLookPrice4183081">￥31.90</p>
                <p>三利 纯棉A类标准简约素雅大浴巾 70×140cm 男女同款 柔软舒适吸水裹身巾 豆绿</p>
            </a>
        </div>
    </div>
</div>

<!-- 求长度,判断是否有更多属性,有则显示 -->
{{$goodsItemAttrListLen := len .goodsItemAttrList}}
{{if gt $goodsItemAttrListLen 0 }}
{{range $_, $value := .goodsItemAttrList}}
<div class="ft20 ml20 mt20">{{$value.Cate}}</div>
<div class="xzbb ml20 mt10 clearfix">
    {{range $_,$v := $value.List}}
    <div class="banben fl">
        <span>{{$v}}</span>
    </div>
    {{end}}
</div>
{{end}}
{{end}}

<div class="xqxq mt10 ml20">
    <div class="top1 mt10">
        <div class="left1 fl">{{.goods.GoodsVersion}} <span id="color_name"></span></div>
        <div class="right1 fr">{{.goods.Price}}元</div>
        <div class="clear"></div>
    </div>
    <div class="bot mt20 ft20 ftbc">总计：{{.goods.Price}}元</div>
</div>
<div class="xiadan ml20 mt10">
    <input id="addCart" class="jrgwc" type="button" name="jrgwc" value="加入购物车" />
</div>
</div>
<div class="clear"></div>
</div>

CSS调整

确保CSS样式正确应用，特别是对于浮动和清除浮动的处理：

.container{
    width: 1226px;
    margin:0 auto;
}
.clearfix::after{
    clear: both;
    content: "";
    display: block;
}

总结

通过调整代码块的插入位置和CSS样式，可以解决布局覆盖的问题。如果问题依然存在，建议进一步检查HTML和CSS代码，或者使用浏览器的开发者工具进行调试。