我如何在 HTML/CSS 中做到这一点答案

【问题标题】：How can i do this in HTML/CSS我如何在 HTML/CSS 中做到这一点
【发布时间】：2011-01-16 08:14:50
【问题描述】：

我对网页设计完全陌生，我似乎无法完成下图中的内容。即使你能告诉我这个布局叫什么，我也可以在谷歌上搜索建议，它会很棒

提前致谢

【问题讨论】：

你可以购买你显然想复制的模板......
你能举个例子吗？我可以帮忙，但我不明白你的问题。

【解决方案1】：

好吧，您可以从容器 div 开始。然后添加一个具有设定宽度的“盒子”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>

【讨论】：

嗨，谢谢，代码运行良好，除了当我尝试添加另一个盒子时，它们只是堆叠在一起
关于它如何不适合您的更多信息？我刚刚尝试将上面的确切代码粘贴到我的网页中，它的行为就像我认为的那样......也许你可以显示一些代码？

【解决方案2】：

这只是一个一般性的提示。对于漂亮的基于网格的设计，您可以在 Google 上搜索css frameworks。

以下是一些示例页面：

【讨论】：

【解决方案3】：

这是来自ThemeTrust 的Leverage theme。

【讨论】：