css - 创建 CSS 布局

Question

此时，我在创建 CSS 布局方面遇到了很大的问题。我正在学习如何将 PSD 文件转换为 HTML/CSS。

我知道如何制作这些小细节，例如字体大小、颜色、填充，除了布局之外的所有内容。

例如，我在创建两列布局时遇到了问题(我通常使用 float )。例如，查看此布局:

我 float 两列，一列向左，另一列向右。现在这通常是我遇到很多问题的地方，将这些 移动到 float 列中，它们经常下降或无法放入其中。

我用来定位它们的所有内容都是 float 的，然后我设置边距和填充以将它们定位在我想要的位置。您将使用什么方式将这些蓝色方 block 放置在左栏中的绿色矩形内？你能给我一些例子和技巧吗？

我将非常感谢任何答案，提前致谢:)

Answer 1

我建议看一下 flexible box model .

用灵活的盒子模型做你需要做的事情并不太复杂。

CSS:

.green {
    display: box;
    box-orient: horizontal;
    box-pack: start;
    box-align: start;
}

.stuffOnTheRight {
    display: box;
    box-orient: vertical;
    box-pack: start;
    box-align: start;
}

HTML:

<div class="green">
    <div id="square">
    </div>
    <div id="stuffOnTheRight">
        <div id="black"></div>
        <div id="yellow"></div>
    </div>
</div>

我意识到这并没有回答如何用 float 来做，但你应该考虑看看这个。