我怎么能在HTML/CSS中做到这一点

Question

我对网页设计完全陌生,我似乎无法完成下图所示的内容.即使你可以告诉我这个布局是什么,所以我可以谷歌寻求建议,这将是伟大的

提前致谢

Answer 1

好吧,你可以从容器div开始.然后添加一个设置宽度的'box'div.如果你将这些div浮动到左侧,它们将在容器中对齐.然后,您可以为框内的项添加框架.

#container {
    width:500px;
    background-color:#CCC;
}
.box {
    width:50%;
    float:left;
    min-height:120px;
}
.boximg {
    // this is your icon for each box
    width:20px;
    float:left;
    display:inline;
}
.boxtitle {
    font-weight:bold;
    float:left;
    display:inline;
}

那你的HTML:

<div id="container">
    <div class="box">
        <div class="boximg"><img src=""/></div>
        <span class="boxtitle">Here is your box title</span>
        <p>Your box text here</p>
    </div>
    <!-- add more boxes here -->
</div>