如何设计一组对象

Question

我想制作一组始终适合屏幕 6 个位置的按钮或跨度（抱歉，我画得不是很直）。首先感谢您的帮助。

Answer 1

.row__main{
    max-width:280px;
    margin:0 auto;
    content:"";
    display: block;
    clear:both;
    height:110px;
    padding:0 15px 0 15px;
    border: 1px solid black;
}

[class^="col-"]{
    float:left;

}
[class^="col-"]:not(:last-child){
    margin-right: 60px;
}

.col-1-of-3{
    margin-top:23px;
    width:calc((100% - 2*#{60px})/3);

}

<div class="row__main">
<div class="row-1">
    <div class="col-1-of-3"><button>button</button></div>
    <div class="col-1-of-3"><button>button</button></div>
    <div class="col-1-of-3"><button>button</button></div>
</div>
<div class="row-1">
    <div class="col-1-of-3"><button>button</button></div>
    <div class="col-1-of-3"><button>button</button></div>
    <div class="col-1-of-3"><button>button</button></div>
</div>
</div>

如何设计一组对象

How to design a group of object

html

css

design-patterns