浮动练习

约 308 字大约 1 分钟

2025-06-23

拓展

学习完flex布局后，可改写为下面代码

CSS

div,ul,li{
    margin:0;
    padding:0;
  	box-sizing:border-box;
}

li {
    list-style-type: none;
}

.mi {
  	float: left; // [!code --]
  	display: flex;// [!code ++]
    justify-content: space-between;// [!code ++]
    width: 1226px;
    height: 614px;
    margin: 100px auto;
}

.left{
    float: left; // [!code --]
    width: 234px;
    height: 614px;
    background-color: skyblue;
}

.right{
    float: right; // [!code --]
    width: 978px;
    height: 614px;
    background-color: red;
}

.right ul {
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
}

.right li{
    float: left; // [!code --]
    width: 234px;
    height: 300px;
    background-color: pink;
  	margin-right: 14px; // [!code --]
    margin-bottom: 14px;
}

HTML

<div class="mi">
    <div class="left">左侧</div>
    <div class="right">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
</div>