鍍金池/ 問答/HTML5  HTML/ 讓 div 裡面的 div 無條件靠上？

讓 div 裡面的 div 無條件靠上？

.a{
width: 23%;
  height: 255px;
  margin: 15px 9px;
  display: inline-block;
  border-radius: 5px;
  border: 1px #ccc solid;
  cursor: pointer;
}
.b{
width: 1140px;
}

<div class="b">
    <div class="a">
    ...
    </div>
    <div class="a">
    ...
    </div>
    <div class="a">
    ...
    </div>
    <div class="a">
    ...
    </div>
    <div class="a">
    ...
    </div>
    <div class="a">
    ...
    </div>
    <div class="a">
    ...
    </div>
    <div class="a">
    ...
    </div>

</div>

第二個 div 要如何靠上？即便有文字或圖片在裡面？
能用什麼代碼實現(xiàn)呢？

clipboard.png

現(xiàn)在沒辦法對齊
他會蓋過我的文字區(qū)域？？？

clipboard.png

回答
編輯回答
莫小染

不知道你是否需要的是這個效果。

clipboard.png

css 代碼如下，就是在你的基礎(chǔ)上增加了點(diǎn)熟悉 和修改名稱

        <style type="text/css">
            ul {
                list-style: none;
                width: 100%;
            }
            
            .li-item {
                width: 23%;
                text-align: center;
                height: 255px;
                float: left;
                display: inline-block;
                border-radius: 5px;
                border: 1px #ccc solid;
                cursor: pointer;
            }
            
            .content {
                width: 1140px;
                position: relative;
            }
        </style>

html 代碼如下

        <div class="content">
            <ul>
                <li class="li-item">
                    <img src="img/lanmeifengmi001.jpg" />
                    <p>這是一個商品</p>
                </li>
                <li class="li-item">
                    <img src="img/lanmeifengmi001.jpg" />
                    <p>這是一個商品</p>
                </li>
                <li class="li-item">
                    <img src="img/lanmeifengmi001.jpg" />
                    <p>這是一個商品</p>
                </li>
                <li class="li-item">
                    <img src="img/lanmeifengmi001.jpg" />
                    <p>這是一個商品</p>
                </li>
                <li class="li-item">
                    <img src="img/lanmeifengmi001.jpg" />
                    <p>這是一個商品</p>
                </li>
                <li class="li-item">
                    <img src="img/lanmeifengmi001.jpg" />
                    <p>這是一個商品</p>
                </li>
                <li class="li-item">
                    <img src="img/lanmeifengmi001.jpg" />
                    <p>這是一個商品</p>
                </li>
            </ul>
        </div>

希望能幫助你

2017年2月17日 02:46